Looking for an alternative way to make the slider only start auto-playing when it is scrolled into view… this Wait for slider to come into view before autoplay method is no longer working…
However I was able to make a demo of a way to make it work:
Clonable:
https://webflow.com/website/start-slider-autoplay-when-scrolled-in
Demo:
https://start-slider-autoplay-when-scrolled-in.webflow.io/
It uses some custom code to watch on scroll for if the slider has been shown and then sets the data-attributes for the slider to autoscroll and then re-sets webflow.js to start the animations again.
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
function restartWebflow() {
window.Webflow && window.Webflow.destroy();
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require('ix2').init();
document.dispatchEvent(new Event('readystatechange'));
};
var scrollTimer;
function scrollFunction() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function() {
var homeSlider = $('#AUTO-PLAY-SLIDER');
if (homeSlider.attr('style') === "display: block;") {
homeSlider.attr('data-autoplay','1').attr('data-delay','1000');
window.removeEventListener('scroll', scrollFunction);
restartWebflow();
}
}, 200);
}
window.addEventListener('scroll', scrollFunction);
});
</script>