Как получить скользкий слайдер для плавного перехода в цикле

Question

Итак, я создал слайдер, используя почти тот же код, что и Андрей. здесь .

Это все замечательно ... но вы заметили переход, когда прокручиваете назад?к первому слайду он прыгает?

Кто-нибудь знает, как я могу это исправить?Я пробовал разные вещи, но ничего не получается.

Я бы хотел, чтобы при загрузке следующего изображения он плавно перемещался по всему циклу слайдера без скачков.

Любая помощь будет принята с благодарностью.Спасибо.

$('.slider').slick({
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3
});

.slick-slide>div {
  transform: scale(.5);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.slick-center>div {
  transform: scale(1);
}

.slider__item>img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
</div>

Answer 1

Так что я просто изменил свой css так, чтобы я непосредственно нацеливался на .slick-center через .slick-slide, и это, похоже, помогло!

Понятия не имею, почему это не сработало раньше, так как я настроил его примерно так же, но по какой-то причине .slick-center должен быть нацелен на .slick-slide вместо того, чтобы самостоятельноПодбирайся и работай плавно.

Спасибо за ссылку на this ReSedano !

:)

Answer 2

Просьба добавить параметры скользящего слайдера:

speed:1300,
infinite: true,

$('.slider').slick({
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3,
  speed:1300,
  infinite: true,
});

.slick-slide>div {
  transform: scale(.5);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.slick-center>div {
  transform: scale(1);
}

.slider__item>img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
</div>