Есть слайдер slick
слайдами которого я управляют с помощью 3 кнопок.
Как сделать так, что эффект при переключении оставался стандартным slide
, а не так как сейчас со сменой?
Решения пока не нашел.
$('#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/[email protected]/slick/slick.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>