如何解决使用Slick Carousel同步图像
基本上,我为此https://kenwheeler.github.io/slick/使用了https://arlibera.ma/Apoxer/main.html
我已经阅读了Slick文档,确实有一个同步选项,但仅在另一张幻灯片上可用。 是否可以链接要与幻灯片一起显示的图像?
谢谢。
幻灯片的JS代码:
$(function(){
$('.center').slick({
centerMode: true,centerPadding: "0px",slidesToShow: 8,arrows:false,autoplay:false,infinite:false,responsive: [
{
breakpoint: 768,settings: {
arrows: false,centerMode: true,centerPadding: '40px',slidesToShow: 3
}
},{
breakpoint: 480,slidesToShow: 1
}
}
]
});
});
解决方法
您可以使用afterChange()
和beforeChange()
事件来触发所需的任何JavaScript。例如,您可以编写函数来切换其他图像以使其显示如下:
HTML
<img id="image0" class="hero-image" src="..." />
<img id="image1" class="hero-image" src="..." />
<img id="image2" class="hero-image" src="..." />
CSS
// Hide all images to start
.hero-image {
display: none;
}
JavaScript
// Show the current slide's corresponding image after the slide is shown
$('.center').on('afterChange',function(event,slick,currentSlide){
$('.hero-image').hide();
$(`image${currentSlide}`).show();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。