how to change the standard dots on the text (the signature of the slide). That is, when you click on cat 2 switches to the second slide, etc. The number of slides and the text will change.

 $('.slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true }); 
 .slider-dots__item.active{ color: blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> <div class="slider"> <div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTllYQ_g_GV26zcpARW9lG8d_fVwVxqEDFx3xvTC6FKL9YVPcCl" /> </div> <div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSar7YDMGRXxGZH-zC-kCBdEcXDaFSfeUGAcGnOW-4Mh0-B8N3j0w" /> </div> <div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSar7YDMGRXxGZH-zC-kCBdEcXDaFSfeUGAcGnOW-4Mh0-B8N3j0w" /> </div> </div> <div class="slider-dots"> <div class="slider-dots__item active"> Cat 1 </div> <div class="slider-dots__item"> Cat 2 </div> <div class="slider-dots__item"> Cat 3 </div> </div>

    1 answer 1

    As written in the documentation , to switch to the desired slide, you need to use the slickGoTo method.

    See an example.

     $('.slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true }); $('.slider-dots .slider-dots__item').click(function() { var $this = $(this); $('.slider').slick('slickGoTo', $this.data('index')) }); 
     .slider-dots__item.active { color: blue; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" /> <div class="slider"> <div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTllYQ_g_GV26zcpARW9lG8d_fVwVxqEDFx3xvTC6FKL9YVPcCl" /> </div> <div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSar7YDMGRXxGZH-zC-kCBdEcXDaFSfeUGAcGnOW-4Mh0-B8N3j0w" /> </div> <div> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSar7YDMGRXxGZH-zC-kCBdEcXDaFSfeUGAcGnOW-4Mh0-B8N3j0w" /> </div> </div> <div class="slider-dots"> <div class="slider-dots__item active" data-index="1"> Cat 1 </div> <div class="slider-dots__item" data-index="2"> Cat 2 </div> <div class="slider-dots__item" data-index="3"> Cat 3 </div> </div>