当幻灯片在viewport slick.js中加载图像

Question

我想实现以下结果:使用slick.js，我想只在指定幻灯片在视口中时加载一些图像。我在控制台中看到，当幻灯片处于活动状态时，它会收到以下标签"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>

金桥:

$('.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);
});

有了这些代码，我希望图像包含在div中，类为"。third-slide-first"加载几秒钟后，当幻灯片带有类"。third-slide"出现在视图中

查看控制台后，我看到这张幻灯片将收到"slick-current "类。使用lazyLoad会立即加载图像，但我想让它稍微延迟一点，也许用css过渡来一点动画。

Answer 1

感谢您的查询，

你可以尝试光滑的afterchange功能，

$('.slider-for').on('afterChange', function(event, slick, currentSlide, nextSlide){
console.log(currentSlide);
});

你会得到currentSlide，你可以用它来加载图片。

你可以在这里阅读更多