How to add space between absolute elements - css

Question

I'm working on a slider with gsap & nuxt but I can't find a way to add space between the absolute positioned slides. The absolute position is necessary for the animation to work properly. I tried inline-block to the slide and white-space: nowrap to the wrapper but the animation falls apart then.
Here's a minimal demo of the slider: https://codesandbox.io/s/withered-star-3y44ig?file=/pages/index.vue
Any help is much appreciated! Thanks in advance!

Answer 1

UPD 2:
Updating scripts to handle gap between slides with JS (here is part of updated scripts (and here is fork with updates of your code):
// ...
var percGap = 5; // gap between slides in percentages
var slideWidthWithGap = 100 + percGap;
var slideXPercent = (i) => i * slideWidthWithGap;
gsap.set(slides, {
xPercent: slideXPercent,
});
var wrap = gsap.utils.wrap(
-(slideWidthWithGap * 2),
(numSlides - 2) * slideWidthWithGap
);
var timer = gsap.delayedCall(slideDelay, autoPlay);
var animation = gsap.to(slides, {
xPercent: "+=" + numSlides * slideWidthWithGap,
duration: 1,
ease: "none",
paused: true,
repeat: -1,
modifiers: {
xPercent: wrap,
},
});
// ...
To add to slide rounded corners, add this to .slide
.slide {
/* ... */
border-radius: 1rem;
overflow: hidden; /* crop block outside border */
}
Like an option, you can use slide paddings to make it visually separated:
with using CSS variables:
.slide {
--slide-gap: 1rem;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: calc(100% / 1.5);
padding-left: calc(var(--slide-gap, 0) / 2);
padding-right: calc(var(--slide-gap, 0) / 2);
}
Without CSS variables:
.slide {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: calc(100% / 1.5);
padding-left: .5rem;
padding-right: .5rem;
}
Here is updated CodeSendbox.
UPD:
To add rounded corners to slides, update .slide-content selector:
.slide-content {
border-radius: 1rem;
/* another CSS props */
}