Search code examples
javascriptjquerysasscarouselslick.js

Can I give other buttons the same function as the Slick Carousel dots

I'm redesigning a user interface that has a Slick Carousel in it. It uses dots and arrows for navigation. The Carousel has only two slides.

What I would like to do is use the native navigation buttons of the UI to switch between the slides. I haven't however been able to find out what actual function the dots call, or where it is located.

I know it's an option to redesign and reposition the dots, but that seems like a lot of overhead for an already existing navigation element.

enter image description here

Is this possible and if so, how do I go about it?

Tnx in advance.

Solution

  • Slick has methods for you to work with:

    (function($){
  var slider = $('.slick').slick({
    arrows:true,
    dots:true
  });
  
  $('.next').on('click',function(){
    slider.slick('slickNext');
  });
  
  $('.prev').on('click',function(){
    slider.slick('slickPrev');
  });
  
  $('.first').on('click',function(){
    slider.slick('slickGoTo',0);
  });
  
  $('.last').on('click',function(){
    slider.slick('slickGoTo',4);
  });
  
})(jQuery);
    .slick{
  width: 300px
}
    <link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<div class="slick">
  <img src="https://placekitten.com/600/600" />
  <img src="https://placekitten.com/600/600" />
  <img src="https://placekitten.com/600/600" />
  <img src="https://placekitten.com/600/600" />
  <img src="https://placekitten.com/600/600" />
</div>

<button class="next">NEXT</button>
<button class="prev">PREV</button>

<button class="first">FIRST</button>
<button class="last">LAST</button>