如何解决Slick Slider 响应式在加载时触发 afterChange 事件
我有一个 Slick Slider 轮播,它可以接收一系列帖子并优雅地添加新幻灯片(在生产中我有数千张幻灯片)。但是,当设置了响应断点时,在加载时它似乎会循环遍历所有事件(init 除外),特别是在我的情况下是 afterChange,导致加载的帖子翻倍负载。这是一个示例 https://jsfiddle.net/keithpetrillo/y0zuqa3e/:
$.each(articleGroups,function(index,value) {
$('#main').append("<div class='slider slider-info-" + index + "'></div>");
const slider = $(".slider-info-" + index);
const slickHolder = slider
.on('init',function(event,slick) {
console.log('init')
}).slick({
infinite: false,// Uncomment there to test that it's only on responsive breakpoints
// slidesToShow: 5,// slidesToScroll: 5,// arrows: true,// Comment these out and it doesn't cause the repeating affterChange event
responsive: [{
breakpoint: 0,settings: {
slidesToShow: 1,slidesToScroll: 1,arrows: false
}
},{
breakpoint: 500,arrows: true
}
},{
breakpoint: 800,settings: {
slidesToShow: 2,slidesToScroll: 2,{
breakpoint: 1100,settings: {
slidesToShow: 3,slidesToScroll: 3,{
breakpoint: 1400,settings: {
slidesToShow: 4,slidesToScroll: 4,{
breakpoint: 1700,settings: {
slidesToShow: 5,slidesToScroll: 5,{
breakpoint: 2000,settings: {
slidesToShow: 6,slidesToScroll: 6,{
breakpoint: 2300,settings: {
slidesToShow: 7,slidesToScroll: 7,{
breakpoint: 2600,settings: {
slidesToShow: 8,slidesToScroll: 8,]
}).on("afterChange",slick,currentSlide) {
console.log("afterChange");
// Check condition to load more posts on change
const slidesToShow = slick.slickGetoption('slidesToShow');
if (currentSlide + slidesToShow >= slick.slideCount - buffer && !loading && slick.slideCount < retrievedJSON[index].articles.length) {
loading = true;
renderPosts(slick,slickHolder,index);
}
if (slick.$slides.length === currentSlide + slick.options.slidesToScroll) {
console.log("Last slide");
$('.slick-next').on('click',function() {
slider.slick("slickGoTo",0);
})
}
});
// Load in Initial posts
renderPosts(slickHolder,slider,index);
});
如果你注释掉响应式数组,它可以正常工作。滑块本身似乎只初始化一次。我为事件添加了控制台日志,以查看它们在加载时触发的次数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。