Как увеличить центральный слайд?

Question

[kiruyshka]

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


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

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

Проблемы:

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


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


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

Comments

[Ankhena]

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

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

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

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

Answer 1

[kiruyshka]

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

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

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