在使用slick轮播图插件时,我们有时会有这种需求,
在某些屏幕分辨率下不使用轮播图效果,某些情况使用轮播图效果,
可以使用unslick方法,且这个方法须放入responsive中,
这样就可以确定在什么断点需要加载,哪些不需要加载。
使用方法如下。
<script>
('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 9999,
settings: "unslick" // 在767px-9999px之间不会加载轮播图效果。
},
{
breakpoint: 767,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
}
]
});
</script>
当然unslick()方法也可以直接移除对于slick轮播图的绑定效果。
<script>
if ($(".slider").hasClass('slick-initialized')) {
$(".slider").unslick();
}
</script>
在某些场景中,我们需要更新一些轮播图的属性,但是我们又不想去把轮播图销毁再重新出来一次,
slick插件内部有’slickSetOption’属性可供使用,更新轮播图的属性效果。
<script>
// 旧的轮播图属性,现在我想更新一个新的属性,但是我又不想
// 在这个方法内直接加,因为在实际开发中可能这个文件被很多其他
// 文件引用,因此就需要slickSetOption来更新属性了。
('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000
});
var responsiveVal = [
{
breakpoint: 768,
settings:
{
autoplay: true
}
}, {
breakpoint: 425,
settings: {
autoplay: true
}
}]
// 对之前的slick轮播图效果进行更新
$('.slider').slick(
'slickSetOption',//slickSetOption属性
'responsive',//responsive 自适应屏幕
responsiveVal, // 断点的值 //需要注意的是,responsive这里需要添加的是一个数组对象,不是字符串。
true //如果是UI更新,请将refresh设置为true。
);
</script>
以上就是我对slick轮播图插件中,关于unslick()和slickSetOption方法的记录,欢迎大家分享交流
当然slick还有很多方法和属性值可以使用。
slick的官方文档:https://kenwheeler.github.io/slick/.