<div class="image-rotator" data-rotator-interval="1000">
<figure class="image-rotator__image image-rotator__image--1">
<img src="../../images/product/home-decor-1.png" alt="Image Rotator - Image 1">
</figure>
<figure class="image-rotator__image image-rotator__image--2">
<img src="../../images/product/home-decor-2.png" alt="Image Rotator - Image 2">
</figure>
<figure class="image-rotator__image image-rotator__image--3">
<img src="../../images/product/home-decor-3.png" alt="Image Rotator - Image 3">
</figure>
</div>
<div class="image-rotator{{modifierClasses|lspace}}" data-rotator-interval="1000">
{% for image in images -%}
<figure class="image-rotator__image image-rotator__image--{{loop.index}}">
<img src="{{image.src|path}}" alt="{{image.alt}}">
</figure>
{%- endfor %}
</div>
{
"images": [
{
"src": "/images/product/home-decor-1.png",
"alt": "Image Rotator - Image 1"
},
{
"src": "/images/product/home-decor-2.png",
"alt": "Image Rotator - Image 2"
},
{
"src": "/images/product/home-decor-3.png",
"alt": "Image Rotator - Image 3"
}
]
}
$(document).ready(() => {
const $imageRotator = $('.image-rotator')
if ($imageRotator.length && $('.image-rotator__image', $imageRotator).length) {
// initialize slick image rotator and pause
const imageRotator = $imageRotator.slick({
accessibility: false,
autoplay: true,
autoplaySpeed: $imageRotator.data('rotator-interval') || 5000,
arrows: false,
dots: false,
fade: true,
swipe: false,
draggable: false,
touchMove: false,
pauseOnFocus: false,
pauseOnHover: false,
lazyLoad: true,
}).slick('slickPause')
// check for visibility and play or pause
$(window).on('load resize scroll', () => {
if ($imageRotator.isInViewport()) {
imageRotator.slick('slickPlay')
} else {
imageRotator.slick('slickPause')
}
})
}
})
.image-rotator {
$this: &;
&__image {
display: inline-block;
}
}
No notes defined.