Spacing & sizing

The gap between slides

Space slides with a padding-left and cancel the first one with a matching negative margin-left on the track. Every slide box then measures the same and they sit flush against each other, which is what keeps loop uniform — and it leaves the basis a plain 1 / N fraction.

.carousel__track {
  display: flex;
  margin-left: -16px;
}

.carousel__slide {
  box-sizing: border-box;
  flex: 0 0 calc(100% / 3);
  min-width: 0;
  padding-left: 16px;
}

Driving the CSS from the options

slideWidth and spaceBetween size nothing by themselves. They only write --swipi-slide-width and --swipi-slide-gap onto the track. If your CSS never reads those properties, passing the options changes nothing on the screen — the carousel goes on measuring whatever your stylesheet actually produced.

Read them in the track and the slide rule to let the hook drive the layout:

.carousel__track {
  display: flex;
  margin-left: calc(-1 * var(--swipi-slide-gap, 0px));
}

.carousel__slide {
  box-sizing: border-box;
  flex: 0 0 calc(var(--swipi-slide-width, 300px) + var(--swipi-slide-gap, 0px));
  min-width: 0;
  padding-left: var(--swipi-slide-gap, 0px);
}

const [carouselRef] = useSwipiCarousel({
  slideWidth: 300,
  spaceBetween: 12
})

Now the options decide the width and the gap, and dropping one takes the property back off the track so the fallback in var() takes over. Skip the options entirely and the CSS above is just a stylesheet with defaults. The full contract is in the API reference.

Backgrounds and the gap

The gap belongs to the slide here, so a background on the slide itself would fill it. Give the background to an element inside the slide, or clip it to the content box.

.carousel__slide {
  /* the gap belongs to this box, so paint the content instead */
  background-clip: content-box;
}

/* or give the background to an element inside the slide */
.carousel__card {
  height: 100%;
  background-color: #1a1819;
}

What to keep in mind

• Leave the track's width alone and never set it to fit-content. A percentage flex-basis resolves against the track, and a track sized by its own content makes that circular.
• Keep box-sizing: border-box and min-width: 0 on the slide so the padding stays inside the width you set and long content cannot push the box wider.
• Change the gap through spaceBetween rather than a media query — see Responsive for why.