0

Есть слайдер 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>

1 ответ 1

3

Так?

$('#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/[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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.