Как переделать center mode в slick.js?

Question

[imatte]

Собственно имеется такая страничка - preview, на которой находится слайдер, реализованный с помощью slick.js с centerMode: true.

Необходимо получить следующий результат:

Визуально сейчас так и сделано, но проблема при скролле слайдера (при перетаскивании справа-налево).

Одновременно на экране показывается один слайд, поэтому чтобы по бокам было видно край белого блока для предыдущего и следующего слайда я делаю left: 0 и right: 0 соответственно. Из-за этого и возникает некрасивый скачок при переключении слайда. Решения лучше в голову не приходит.

Посоветуйте как пофиксить? Другой слайдер тоже подойдет, но ничего с таким функционалом я не нашел.

Answer 1

[ArtViolence]

centerPadding: 0

Comments

[imatte]

При этом другие слайды просто будут вне экрана. А мне нужно чтобы по бокам было видно часть белых блоков.

[ArtViolence]

Чем тебя не устраивает стандартное поведение слайдера? По умолчанию centerPadding: "40px", то есть соседние блоки видно в контейнере слайдера по 40 пикселей слева и справа.

[imatte]

ArtViolence: белый блок -- это блок внутри слайда. Собственно в кадре и видно 40px "слайда", но не белого блока, т.к. белый блок находится в центре слайда, а не на его краю.

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

[ArtViolence]

Можно сделать белый блок слайдом и маржины между ними нужного размера, чтобы соседние слайды "торчали" по бокам контейнера

[imatte]

ArtViolence: спасибо за идею! С маргинами оно работать не захотело, а с паддингами заработало.