{% block body %}
<div class="your-class">
   {% for property in properties %}
        <div class="carousel-item position-relative">
    <a href="{{ path('app_properties_show', { 'id': property.id }) }}">
        {% if property.images|length > 0 %}
            <img style="width: 450px; height: 400px;" src="{{ asset('images/properties/' ~ property.images[0].imagename) }}" alt="{{ property.title }}">
            <h4 class="position-absolute text-white" style="bottom: 0; left: 0; right: 0; margin-bottom:0; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(255,255,255,0)); padding: 15px;">{{ property.title }}</h4>
        {% else %}
            <img src="{{ asset('images/no-image.png') }}" style="width: 450px; height: 400px;" alt="No image available">
        {% endif %}
    </a>
</div>

   {% endfor %}
</div>
{% endblock %}
</div>
{% block javascripts %}
<script type="text/javascript">
$(document).ready(function(){
  $('.your-class').slick({
    vertical: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,             
    autoplaySpeed: 3500,    
    arrows: false	     
      });
});
</script>
{% endblock %}