javascript - 需要帮助正确扩展 jQuery Slick Slider 插件来改变它的滑动方式

Question

我接到一项任务，要更改 slider 的工作方式。我们使用名为 Slick Slider 的 jQuery 插件来显示新闻简介。

他们想让我做的是让上一个/下一个按钮和自动播放在所有模式(移动设备、平板电脑和桌面设备)中一次移动一个 slider 。好的，没问题，我设置起来很容易。然后他们要求我对其进行更改，使其每 3 张幻灯片显示一个点，单击这些点可将 slider 一次移动 3 张幻灯片。

显然，这需要我对 slick.js 中的函数进行修改。我没有看到任何内置功能来执行此操作。我试图弄清楚如何扩展这个库并一次覆盖一个函数。老实说，我不确定如何使用 jQuery 插件正确地做到这一点。

由于我们在 Drupal 中运行它，所以这很复杂。我已经设置了一个 JS Fiddle，它非常接近我们现在正在做的事情。

JS fiddle :https://jsfiddle.net/9z52tfkw/

我的 slick 启动代码在这里:

(function($) {
  $('.my-slider').slick({
        speed: 1000,
        autoplay: true,
        dots: true,
        mobileFirst: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        focusOnSelect: true,
        appendArrows: $('.controls'),
        prevArrow: '<button type="button" class="prev">Prev</button>',
        nextArrow: '<button type="button" class="next">Next</button>',
        responsive: [
          {
            breakpoint: 960,
            settings: {
              dots: true,
              slidesToShow: 3
            }
          },
          {
            breakpoint: 769,
            settings: {
              dots: true,
              slidesToShow: 2
            }
          }
        ]
      });
}(jQuery));

可在此处找到 Slick Slider 的详细信息和代码:http://kenwheeler.github.io/slick

我使用的是 1.5.6 版。可以在此处找到相同版本的 slick.js 的副本:https://github.com/kenwheeler/slick/blob/1.5.6/slick/slick.js

澄清一下，我并不是要任何人为我做覆盖。相反，我寻求帮助来覆盖插件的功能或以其他方式扩展插件。我在这方面有能力，但会感谢提供的任何帮助。

我认为这对我将来使用其他 jQuery 插件也有帮助。谢谢!

Answer 1

你总是可以只删除三个点中的两个 :)

即将此添加到初始化的末尾:

.find('.slick-dots li').filter(function(i,e){
    return (i % 3 != 0);
}).hide();

JSFiddle:https://jsfiddle.net/TrueBlueAussie/9z52tfkw/2/

更明显的例子:jsfiddle.net/9z52tfkw/3