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 (将#修改为@）

javascript jquery slick.js