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:
YAML
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. :)
TWIG
<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>
---
