Slick-slider перематывается в начало, если задать свойство * {transition: .5s}

Question

Как можно оставить это свойство, но при этом чтобы слайдер работал нормально и не прокручивал в начало после последнего элемента?

$(document).ready(() => {
    

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
    $('.slider-nav').slick({
        arrows: false,
        slidesToShow: 3,
        slidesToScroll: 1,
        /* asNavFor: '.slider-for', */
        centerMode: true,
        focusOnSelect: true,
        autoplay: true,
        autoplaySpeed:1000
    });
});

* {
    transition: .5s;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>

<!-- libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<div class="slider-for">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
  <div class="item">
    Сейчас перемотает в начало
  </div>
</div>

<div class="slider-nav">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
  <div class="item">
    Сейчас перемотает в начало
  </div>
</div>

Answer 1

$(document).ready(() => {
    

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
    $('.slider-nav').slick({
        arrows: false,
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        centerMode: true,
        focusOnSelect: true,
        autoplay: true,
        autoplaySpeed:3000
    });
});

* {
    transition: .5s;
}

.slick-track{
    transition: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>

<!-- libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<div class="slider-for">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
  <div class="item">
    Прокрутки назад больше нет
  </div>
</div>

<div class="slider-nav">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
  <div class="item">
    3
  </div>
  <div class="item">
    4
  </div>
  <div class="item">
    Прокрутки назад больше нет
  </div>
</div>

БЛОГ НА HUSL

Slick-slider перематывается в начало, если задать свойство * {transition: .5s}

Ответы (1 шт):