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

Question

[kiruyshka]

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

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


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

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

Проблемы:

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



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



Кто нибудь решал такую задачу с помощью slick? Подскажите как правильно сделать? Или может есть готовый такой слайдер?

Comments

[Ankhena]

Или может есть готовый такой слайдер?

Самый простой способ погуглить по картинкам и фразе связанной с галереей или каруселью.

Кто нибудь решал такую задачу с помощью slick?

По крайней мере раз в неделю на Тостере.

Answer 1

[kiruyshka]

Нашел решение, может кому будет полезно

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

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