The following code will make your slider autoplay only when it comes into view.
You can control when the animation triggers by changing the threshold value.
Instructions are simple: paste this code in a Code Block immediately after your slider. It works with the Basic Slider, Advanced Slider, and Gallery element when set to Slider layout.
const slider = document.querySelector('%%SELECTOR%%').previousElementSibling;
const swiper = slider.querySelector('.swiper').swiper;
// Initially disable autoplay
swiper.autoplay.stop();
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
swiper.autoplay.start();
} else {
swiper.autoplay.stop();
}
});
}, {
threshold: 0.3 // Trigger when 30% of the element is visible
});
observer.observe(slider);
swiper.update();
const swiper = slider.querySelector('.swiper').swiper;
// Initially disable autoplay
swiper.autoplay.stop();
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
swiper.autoplay.start();
} else {
swiper.autoplay.stop();
}
});
}, {
threshold: 0.3 // Trigger when 30% of the element is visible
});
observer.observe(slider);
swiper.update();
