Как решается баг slick-а с прыгающим последним слайдом?

Ссылка скопирована
CSS HTML Slick
11 марта 2026 1 ответ

Проблема распространенная. Но я так и не нашел решения. Выглядит это так

Как решается баг slick-а с прыгающим последним слайдом?

Вот код
https://codepen.io/Loremord/pen/eYQMbJm

Дополнительно:

решается переездом на нормальный слайдер. к примеру swiper.
ибо последний релиз 1,8,0 версии у слика был в 2017 году https://github.com/kenwheeler/slick/

  • Зачем там фиксированные размеры у центрального слайда? Трансформ скейл используй, а то придется миллион брейкпоинтов ставить)
  • iBird Rose, У свайпера столкнулся с другим багом( при loop:true не происходил вправо скролл), поэтому перешел на слик.
  • Overlord934, чет не понял, что за баг такой. Ни разу не видел, сколько им пользуюсь
  • Danny Arty, вот если хотите, не у меня одного такое было https://ru.stackoverflow.com/questions/1502533/swi...
  • Overlord934, а, прикольно. Я просто 8 пользуюсь. Глянул в доку, там вроде все расписано, по поводу изменения loop, да и в ответе на стаке тоже
  • Скачки потому что слик подменяет клонированный слайд, который ты видишь в качестве первого на новом круге, реальным первым при переключении, но только после того как закончится переключение. Но он забывает поставить клону класс активности, поэтому клон приезжает как неактивный и не скейлится, а потом резко меняется на уже приехавший настоящий у которого эта активность стояла еще при начале переключения и он уже заскейлен.
    Хз че тут делать вообще) Попробуй поискать может какую нибудь зависимость классов/атрибутов по которым можно было бы однозначно определить приезжающего клона и ему тоже дай стили скейла
  • imko, Выискал в похожую проблему. Помогло вот это 
    .slick-slide[aria-hidden="true"]:not([tabindex="-1"])+.slick-cloned[aria-hidden="true"] {     opacity: 1;     padding-top: 89px;     transform: scale(120%);     transition: all .2s ease; }

    .slick-slide[aria-hidden="true"]:not([tabindex="-1"])+.slick-cloned[aria-hidden="true"] { opacity: 1; padding-top: 89px; transform: scale(120%); transition: all .2s ease; }

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Максим Павлов Ответ

    Для решения проблемы с прыгающим последним слайдом в Slick Carousel, вам следует использовать параметр `centerMode` в настройках вашего слайдера.

    Проблема с прыгающим последним слайдом обычно возникает из-за того, что последний слайд не отображается центрированным на экране, что приводит к его "прыжкам" при перелистывании. Использование `centerMode` позволяет центрировать последний слайд и избежать этой проблемы.

    Пример настройки Slick Carousel с параметром `centerMode`:

    $('.your-carousel').slick({
  centerMode: true,
  centerPadding: '0px', // расстояние между центрированным слайдом и краем слайдера
  slidesToShow: 3, // количество отображаемых слайдов
  // другие настройки вашего слайдера
});

    $('.your-carousel').slick({ centerMode: true, centerPadding: '0px', // расстояние между центрированным слайдом и краем слайдера slidesToShow: 3, // количество отображаемых слайдов // другие настройки вашего слайдера });

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

    Если проблема остается после применения вышеуказанных рекомендаций, рекомендуется обратиться к документации Slick Carousel или сообществу разработчиков для получения более подробной помощи.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ