Slideshow
The slideshow component is used within the stories to display multiple images with captions.
By default the list of items is displayed as a slideshow, clicking the list view button converts the slideshow to a list.
Requires:
dist/js/slick-carousel/vendors/slick.min.jssrc/components/slick-carousel/vendors/slick.cssdist/js/slideshow.bundle.js
{{ attach_library('h4h_theme/slideshow') }}
{% if guestbook == true %}
{{ attach_library('h4h_theme/quote-slideshow') }}
{% set guestbook_slider_class = ' guestbook' %}
{% else %}
{% set guestbook_slider_class = '' %}
{% endif %}
{% import '@h4h_theme/icons/icons.twig' as icons %}
<section class="slideshow{% if full_width == true %} full-width{% endif %}{{ guestbook_slider_class }}">
{# Create a separate div for navigation #}
<div class="slideshow__nav">
{# Slide Count #}
<div class="slideshow__count">
<div class="slideshow__count-wrapper">
<span class="js-slideshow-countnow">1</span>
<span class="slideshow__slash">/</span>
<span class="js-slideshow-counttotal">3</span>
</div>
</div>
{# Play/Pause #}
<div class="slideshow__play-pause">
<button class="slideshow__btn slideshow__play">
{{ source('@h4h_theme/slideshow/assets/icon-play.svg') }}
</button>
<button class="slideshow__btn slideshow__pause">
{{ source('@h4h_theme/slideshow/assets/icon-pause.svg') }}
</button>
</div>
{# Next/Previous #}
<button type="button" class="slideshow__btn slideshow__prev">
{{ source('@h4h_theme/slideshow/assets/icon-previous.svg') }}
</button>
<button type="button" class="slideshow__btn slideshow__next">
{{ source('@h4h_theme/slideshow/assets/icon-next.svg') }}
</button>
{# Button toggle for slideshow view. #}
<button class="slideshow__toggle js-slideshow-toggle">
<span class="slideshow__off">{{ source('@h4h_theme/slideshow/assets/icon-list.svg') }}<span class="slideshow__list-text"> {{ button.off_text }}</span></span>
<span class="slideshow__on">{{ source('@h4h_theme/slideshow/assets/icon-slides.svg') }} {{ button.on_text }}</span>
</button>
</div>
<div class="slideshow__slides">
{# Actual Slides with images. #}
<div class="js-slideshow">
{% for slide in slides %}
{% set slide_src = ( full_width == true ? slide.fullwidth : slide.img ) %}
<div class="slideshow__slide">
<div class="slideshow__intrinsic">
{% if guestbook == true %}
<div class="slideshow__quote">
{%
include '@h4h_theme/blockquote/blockquote.twig' with {
quote: slide.quote,
credit: slide.cite,
show_twitter: "false",
modifier_class: "blockquote--color-white-on-blue"
} only
%}
</div>
{% else %}
<div class="slideshow__img">
<img alt="" data-lazy="{{ slide_src }}" />
</div>
{% endif %}
</div>
{% if guestbook != true and slide.caption is not empty %}
<div class="slideshow__caption">
{{ slide.caption|raw }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{#
Caption slides. This are hidden when the slideshow is destroyed.
Instead the captions are displayed directly under each image
using the slideshow__slides markup above.
#}
<div class="js-slideshow-captions slideshow__caption-slides">
{% for slide in slides %}
<div class="slideshow__caption">
{{ slide.caption|raw }}
</div>
{% endfor %}
</div>
</section>