How to add space between absolute elements

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 */
}