Блог

Главная - Вопросы по программированию - Скользкая карусель — как изменить активную позицию слайда

Скользкая карусель — как изменить активную позицию слайда

#javascript #html #jquery #css #slick.js

Вопрос:

Привет, мне нужно немного переместить текущий активный слайд вправо padding-left . При этом ползунок немного подскакивает на каждом следующем слайде.

Как исправить это поведение?

https://jsfiddle.net/ezy50jd2/2/

HTML:

 <div class="slick-center">
  <div>
    <img src="https://via.placeholder.com/260x150">
  </div>
  <div>
    <img src="https://via.placeholder.com/260x150">
  </div>
  <div>
    <img src="https://via.placeholder.com/260x150">
  </div>
</div>

CSS:

 .slick-slide{
  width: 300px;
}
.slick-center .slick-current{
  padding-left: 90px;/*this makes slides jump*/
}

Настройка:

 $(function () {
    $('.slick-center').slick({
        infinite: true,
        autoplay: true,
        centerMode: true,
        centerPadding: '180px',
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 400,
        dots: false,
        prevArrow: false,
        nextArrow: false,
        variableWidth: true
    });
});

Комментарии:

1. Какова цель добавления дополнения к «текущему элементу»?

2. хороший вопрос, потому что мне нужно добавить элемент слева от каждого текущего активного слайда. Итак, текущий слайд нужно сдвинуть вправо.

3. Просто спрашиваю, потому что мог бы быть лучший подход к вашей проблеме, если бы вы предоставили больше разметки о том, что это за элемент .

Ответ №1:

Вы могли бы попробовать использовать атрибут transform . Вы даже можете добавить эффект перехода для более плавной анимации.

  transform: translateX(90px);  
 transition: 1s ease-in-out;

Вилка вашей скрипки с реализацией
https://jsfiddle.net/nh4qucdp/25 /

Комментарии:

1. Привет, Адитья, большое спасибо, но после 3 слайдов все еще есть эффект перехода, даже с переходом, который действительно проявляется в моей живой версии. Может ли это быть ошибка с slick slider?

Метки: