I am aiming to achieve a specific result by utilizing slick.js. My goal is to dynamically load images only when the corresponding slide is within the viewport. Upon inspecting the console, I noticed that an active slide will be marked with the classes "slick-current slick-active".
HTML:
<div class="container">
<div class="slider slider-for">
<div class="third-slide">
<img src="media/bg3.png" />
<div class="third-slide-menu">
<a href="#" data-slide="3" class="subnav-current">Page1</a>
<a href="#" data-slide="4">Page2</a>
<a href="#" data-slide="8">Page3</a>
<a href="#" data-slide="12">Page4</a>
<a href="#" data-slide="15">Page5</a>
<a href="#" data-slide="2">Page6</a>
</div>
<div class="third-slide-first">
<img src="media/second-slide-left.png" />
</div>
</div>
</div>
</div>
jQ:
$('.slider-for').slick({
vertical: true,
slidesToShow: 1,
arrows: false,
speed: 0,
swipe: false
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-for').slick('slickGoTo', slideno - 1, false);
});
With this setup, my objective is to delay the loading of the image inside the div with the class ".third-slide-first" until a few seconds after the slide with the class ".third-slide" enters the view.
Upon further investigation in the console, it was observed that this slide will be assigned the classes "slick-current slick-active" when it is in the viewport. While lazyLoad can preload the image instantly, I prefer a slight delay, potentially adding some CSS transitions for animation effects.