@kiruyshka

Slick, как сделать эффект увеличения?

Всем привет! Прошу помощи в следующем вопросе.

Требуется сделать слайдер с эффектом scale как здесь
213563230_d61cf7418d39478041e67f4b57e893

Настройки слайдера

$('.pitem-slider').slick({
                slidesToShow: 3,
                centerMode: true,
                arrows:false,
            });


Проблемы:

1. Как сделать чтобы было всего по 3 элемента при прокрутке? При включенном режиме centerMode, с краев появляются куски следующих элементов?

5a8180735af87677375011.png

2. При указании scale(1.2) центральному элементу, а другим 0.85 например, то теряется логика отступов и они просто наезжают друг на друга

5a8182d22823f280037905.png

Кто нибудь решал такую задачу с помощью slick? Подскажите как правильно сделать? Или может есть готовый такой слайдер?
  • Вопрос задан
  • 1686 просмотров
Решения вопроса 1
@kiruyshka Автор вопроса
Нашел решение, может кому будет полезно

1. Решается параметром
centerPadding: 0,

2. Внутри элементов слайдера делается div с шириной 80% и margin: auto, для центрального элемента соответственно прописывает width:100%.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы