Open fatcarter opened 1 year ago
@fatcarter add margin: 0 -{X}px; to slider; X should be same as gap between slider items
i need some help for this problem too, any new changes
This seems to work:
.carousel__slide {
padding: 0 1rem;
}
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.
@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
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.
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!!!!💪🏼
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?