Modo Claro

Photos slider

Photos slider (also known as carousels or slideshows) are a simple way to display a variety of images. It's pre-defined component. The idea of large, magnificent, dazzling picture shows might be very appealing. Attractive photos can entice new visitors to your site by attracting their attention right away.

Following is the location of this component.

└── src 
  ├── views
   ├── components
   |  ├── home
   |  |   ...
   |  |  ├── photos-slider.twig
          ...

Example

Photo Slider

Variables

Usage

Using a for-loop, The slider's images within items will be displayed using item.image.url.

<section id="photos-{{ position }}">
    <div data-id="photos-{{ position }}">
        <div class="swiper-wrapper">
            {% for item in items %}
                <div class="swiper-slide" data-src="{{ item.image.url }}"></div>
            {% endfor %}
        </div>
        <div class="swiper-pagination"></div>
        <button aria-label="Previous Slide" class="slider-prev">
            Previous
        </button>
        <button aria-label="Next Slide" class="slider-next">
            Next
        </button>
    </div>
</section>

Last modified: 10 months ago