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

Need help properly extending jQuery Slick Slider plugin to change how it slides

本文关键字：改变 方式 插件 帮助 扩展 jQuery      更新时间：2023-09-26

我被赋予了一个任务来改变我们的滑块的工作方式。我们使用名为Slick Slider的jQuery插件来显示新闻导语。

他们想让我做的是有上一个/下一个按钮和自动播放所有移动滑块在所有模式(移动，平板电脑和桌面)一次滑动。没问题，我很容易就搞定了。然后他们让我改变它，这样每3张幻灯片显示一个点，点击这些点每次移动3张幻灯片。

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

由于我们在Drupal中运行这一事实，这是复杂的。我已经设置了一个JS提琴与我们现在正在做的非常接近。

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

我的起始代码在这里:

(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));

滑块详细信息和代码可以在这里找到:http://kenwheeler.github.io/slick

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

澄清一下，我并没有要求任何人为我做重写。相反，我请求帮助重写插件的功能或以其他方式扩展插件。我能胜任那里的工作，但我会感激你提供的任何帮助。

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

你可以从三个点中去掉两个:)

。将此添加到init:

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

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

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

相关文章：