Slider with thumbnails - select next item in for loop

Archive
1

Hey guys,

I’m trying to build a slideshow with thumbnails of the next and previous slide. The Idea is to show the thumbnail of the next slide only if there is a next slide and vice versa. I hope you get the idea…

Images are set inside the page-header of the markdown file like this:

swiper_class: swiper
gallery:
  - image: bsp1.jpg
    description: quia non numquam
  - image: bsp2.jpg
    description: Sed ut perspicia
  - image: bsp3.jpg
    description: Sed ut perspicia

My template file for the slider looks like the following. It seems to work but since I’m no PHP developer I don’t quite know if thats the right way to do. It would be nice if someone could have a look at my code and give some advice. Thanks in advance. :slight_smile:

  <div class="swiper-wrapper">
        {% for element in page.header.gallery %}
            <div class="swiper-slide">
                {% if element.description  %} 
                <p class="description">{{ element.description|e }}</p>
                {% endif %}
                <img src="{{ page.media[element.image].cropZoom(1440, 800).url() }}" >

                {# Add Pagination #}
                {# show next thumb only if there is a next slide #}
                {% if (loop.index < loop.length ) %}
                  {% set next_image = page.header.gallery[loop.index0 + 1] %}
                  <figure class="swiper-thumbnail-next">
                    <img src="{{ page.media[next_image.image].cropZoom(150, 100).url() }}" >
                    <figcaption>next</figcaption>
                  </figure>
                {% endif %}

                {% if (loop.index > 1 ) %}
                {# show prev thumb only if there is a prev slide #}
                {% set prev_image = page.header.gallery[loop.index0 - 1] %}
                <figure class="swiper-thumbnail-prev">
                  <img src="{{ page.media[prev_image.image].cropZoom(150, 100).url() }}" >
                  <figcaption>prev</figcaption>
                </figure>
                {% endif %}
            </div>

        {% endfor %}
    </div>
---
2

i am newbie and i am so interesting with your post…in which way i can see your template by using script above???

3

Also interested in seeing the finished product… please post the url when it goes live :slight_smile:

4

I will send you guys the link when the project is finished. Since no one wrote something about the code I assume it’s fine? Right now the slider looks like this:
It’s based on indangerous Swiper Bildschirmfoto 2016-10-08 um 12

5

There you go guys.

http://www.schreinerei-hammes.de/