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

Question

I have been given a task to change how our slider works. We use the jQuery plugin called Slick Slider to display news blurbs.

What they want me to do is to have the previous/next buttons and autoplay to all move the slider one slide at a time in all modes (mobile, tablet, and desktop). Ok not a problem, I set that up easily enough. Then they asked me to change it so that it displays one dot for every 3 slides and clicking those dots moves the slider 3 slides at a time.

Obviously this is going to require me making modifications to the functions in slick.js. I don't see any built in functionality to do this. I am trying to figure out how to extend this library and override the functions one at a time. To be honest I am not sure how to do this properly with jQuery plugins.

This is complicated by the fact that we are running this in Drupal. I have setup a JS Fiddle with a close approximation of what we are doing right now.

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

My slick initiation code is here:

(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 details and code can be found here: http://kenwheeler.github.io/slick

I am using version 1.5.6. A copy of the same version of slick.js can be found here: https://github.com/kenwheeler/slick/blob/1.5.6/slick/slick.js

To clarify, I am not asking that anyone do the overrides for me. Instead I am asking for help in overriding the plugin's functions or otherwise extending the plugin. I am capable from there, though will be grateful for any help provided.

I think this will also help me in the future with other jQuery plugins. Thanks!

Answer 1

You can always just remove 2 out of three of the dots :)

i.e. add this to the end of the init:

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

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

For a more obvious example: jsfiddle.net/9z52tfkw/3