How to fix shadow clipping on slick js slides?

Question

Layout

Here's the left and right slick slider clipping the shadows. How can this be resolved? I thought to rebuild the animation in such a way that the blocks of the type would not follow each other in a row, but generally remain outside the screen (invisible blocks). But I have no idea how to do this in slick js.

Answer 1

I would do the following:
1) .slick-list - remove overflow: hidden by putting it on the general section so that the horizontal scroll does not appear.
2) For all all slick-slides that are NOT slick-active opacity 0. Well, add a transition to make it appear smoothly.

Answer 2

add some padding to the container

Answer 3

Correct solution:
1) With slide centering

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

2) If there is no need to center the slides

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