Как исправить обрезание теней у слайдов slick js?

Question

[daniel_wesson]

Вот слева и справа slick слайдер обрезает тени. Как образом это можно решить? Я думал перестроить анимацию таким образом, что бы блоки типа не в ряд шли друг за другом, а вообще оставались за пределами экрана (невидимые блоки). Но понятия не имею как сделать такое на slick js.

Answer 1

[Andrey_Hmytron]

Я бы сделал следующим образом:
1) .slick-list - убрать overflow: hidden, поставив его на общую секцию что бы горизонтальный скролл не появлялся.
2) Длля всех всех slick-slide которые НЕ slick-active opacity 0. Ну и transition добавить что бы плавно появлялось.

Comments

[D M]

Если вы уберёте overflow:hidden – все элементы вне зоны слайда станут видимыми.

Answer 2

[Eugene Chefranov]

добавьте контейнеру padding

Answer 3

[D M]

Правильное решение:
1) С центрированием слайдов

$('.comments__author-items').slick({
    centerMode: true,
    centerPadding: '60px'
});

2) Если нет необходимости центровать слайды

.slick-list {
     padding-left: 15px;
     padding-right: 15px;
     margin-left: -15px;
     margin-right: -15px;
}