[Vuejs]-Vue – how to make gap between flex item in Slick-carousel

by

0👍

✅

If you look at the examples on the npm package itself, spacing between slides are achieved by wrapping each slide with an additional <div> element and then adding margins to the inner one.

Your best bet is to update your DOM as such, by wrapping your .slick-item element with an additional <div>:

<div><div class="slick-item">1</div></div>

Then in your CSS it is a matter of adding an arbitrary horizontal margin, e.g. margin: 0 5px to achieve a 10px spacing between each slide:

.slick-item {
  margin: 0 5px;
  background-color: #e5e5e5;
  aspect-ratio: 1.3/1;
  max-width: 280px;
}

See proof-of-concept example: https://codesandbox.io/s/charming-bas-b78ke?file=/src/components/HelloWorld.vue

Leave a comment