Add space between carousel items in react-slick

While you are working with the react-slick slider, you might be facing an issue to add space between carousel items in react-slick. So today we have come up with the solution to add a margin between carousel items that we have created in ReactJS.

Example:

To replicate the issue, first we have to implement the carousel slider in the react application.

Refer to this article: Carousel Slider in React using react-slick.

Problem:

Check out the below image where you can see the margin is missing between the carousel items.

Problem - Add space between carousel items in react-slick - Clue Mediator

So the problem is how can we add a margin between two items and fit the all three slides/items in one screen?

Solutions:

To fix the above issue, we have two different solutions that work with react-slick sliders. All we need to change the CSS to come out of the problems.

Solution 1:

Add the below style in your CSS.

.slick-slide {
  margin: 0 10px;
}
.slick-list {
  margin: 0 -10px;
}

If this will not work then try the below solution.

Solution 2:

Use the following style in your CSS file.

.slick-slide > div {
  margin: 0 10px;
}
.slick-list {
  margin: 0 -10px;
}

The second solution is working for me that you can see in this article but the first solution works for some developers as well.

Check out the working solution in the blow image.

Fixed - Add space between carousel items in react-slick - Clue Mediator

Hope this will work for you!

That’s it for today.
Thank you for reading. Happy Coding..!!