How do I add a space between each element in a slide

[fatcarter]

If I add a padding or margin property to the slide, as shown in the red box in the image below, there is a blank space at the beginning and end. How to add gaps while ensuring that there is no blank space on both sides？

[sosog]

@fatcarter add margin: 0 -{X}px; to slider; X should be same as gap between slider items

[ncnt257]

i need some help for this problem too, any new changes

[titusdecali]

This seems to work:

.carousel__slide {
  padding: 0 1rem;
}

[jaek-s]

It'd be nice if this library had something built in to add a gap, but this is the approach I took. We use tailwind in our project, so I've done my best to translate this to plain CSS.

Note, I'm using this in a component that has the Carousel as the only element in the <template>

<style scoped>

.carousel {
    /* Make the width 100% plus the width of the gap between slides */
    width: calc(100% + 1.25rem);

    /* replace 0.625rem with half of the gap between slides */
    transform: translateX(-0.625rem)
}

/deep/ .carousel__slide {
    /* Once again, replace 0.625rem with half of the width you want the gap to be */
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
</style>

This approach removes the gap from the left and right sides of the carousel while adding space between slides. Some of the other solutions work, but at least when I tried them there was still extra space on the right side of my carousel.

[fatcarter]

@jaek-s Thats cool! It looks normal, but, actually it's wider than normal, it's just we can't see it, it works for me! Thank you

[MKulikoff]

The easiest solution I found for it, is to use a margin to the slide and add a corresponding negative margin to the parent container.

[ReaganM02]

It'd be nice if this library had something built in to add a gap, but this is the approach I took. We use tailwind in our project, so I've done my best to translate this to plain CSS.

Note, I'm using this in a component that has the Carousel as the only element in the <template>

<style scoped>

.carousel {
    /* Make the width 100% plus the width of the gap between slides */
    width: calc(100% + 1.25rem);

    /* replace 0.625rem with half of the gap between slides */
    transform: translateX(-0.625rem)
}

/deep/ .carousel__slide {
    /* Once again, replace 0.625rem with half of the width you want the gap to be */
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
</style>

This approach removes the gap from the left and right sides of the carousel while adding space between slides. Some of the other solutions work, but at least when I tried them there was still extra space on the right side of my carousel.

Thank you!!!!💪🏼