There is a slick slider which slides I control using 3 buttons. How to make the effect when switching remained a standard slide , and not as it is now with the change?

I have not found a solution yet.

 $('#slider').slick({ slidesToShow: 1, slidesToScroll: 1, adaptiveHeight: true, dots: false, prevArrow: false, nextArrow: false, fade: true, speed: 900 }); $('#button-1').on('click', function() { $('#slider').slick('slickGoTo', 0, true); }); $('#button-2').on('click', function() { $('#slider').slick('slickGoTo', 1, true); }); $('#button-3').on('click', function() { $('#slider').slick('slickGoTo', 2, true); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <button id="button-1">Кнопка 1</button> <button id="button-2">Кнопка 2</button> <button id="button-3">Кнопка 3</button> <div id="slider"> <div><img src="https://bipbap.ru/wp-content/uploads/2017/04/leto_derevo_nebo_peyzazh_dom_derevya_domik_priroda_3000x2000.jpg" alt=""></div> <div><img src="https://s1.1zoom.ru/big0/788/Lavandula_Fields_Blue_525422_1280x778.jpg" alt=""></div> <div><img src="https://cs8.pikabu.ru/post_img/big/2017/06/06/2/1496710261194222281.jpg" alt=""></div> </div>

    1 answer 1

    So?

     $('#slider').slick({ slidesToShow: 1, slidesToScroll: 1, adaptiveHeight: true, dots: false, prevArrow: false, nextArrow: false, speed: 900 }); $('#button-1').on('click', function() { $('#slider').slick('slickGoTo', 0); }); $('#button-2').on('click', function() { $('#slider').slick('slickGoTo', 1); }); $('#button-3').on('click', function() { $('#slider').slick('slickGoTo', 2); }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <button id="button-1">Кнопка 1</button> <button id="button-2">Кнопка 2</button> <button id="button-3">Кнопка 3</button> <div id="slider"> <div><img src="https://bipbap.ru/wp-content/uploads/2017/04/leto_derevo_nebo_peyzazh_dom_derevya_domik_priroda_3000x2000.jpg" alt=""></div> <div><img src="https://s1.1zoom.ru/big0/788/Lavandula_Fields_Blue_525422_1280x778.jpg" alt=""></div> <div><img src="https://cs8.pikabu.ru/post_img/big/2017/06/06/2/1496710261194222281.jpg" alt=""></div> </div>