1

I'm trying to show half of the previous and next slide with react-slick, but I cannot find a viable way to do it with css. I tried to set the padding of the slick-list like this:

.slick-list {
  padding: 0 20% !important;
}

But this only shows the previous slide, not both. Am i missing something regarding the width of each slide? Or is it a better way to do this feature?

Sergiu Tonț
  • 165
  • 13

1 Answers1

0

If you are using the react-slick library, you can adjust the margins using the 'centerPadding' property. If you have any doubts, you can refer to the https://react-slick.neostack.com/docs/example/center-mode library for more information.

If you are creating the component, you can try setting the width of each slide to 50% and the margin to 0 10% (or any percentage you prefer for spacing between slides). Then, you can set the padding of the slick-list to 0.

.slick-slide {
  width: 50%;
  margin: 0 10%;
}

.slick-list {
  padding: 0;
}
Mateus Ranzani
  • 1