CSS Scroll Snap makes a scrolling container stop exactly on each item. You can build a touch friendly carousel without any JavaScript.

HTML

<div class="lotgrafix-carousel">
    <div class="lotgrafix-slide">Slide 1</div>
    <div class="lotgrafix-slide">Slide 2</div>
    <div class="lotgrafix-slide">Slide 3</div>
</div>

CSS

.lotgrafix-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.lotgrafix-slide {
    flex: 0 0 80%;
    scroll-snap-align: center;
}

Properties

• scroll-snap-type: set on the container. Defines the axis and strictness, mandatory or proximity.
• scroll-snap-align: set on the items. Values: start, center, end.
• scroll-snap-stop: use always to prevent skipping items on a fast swipe.
• scroll-padding: offsets the snap position, useful with a sticky header.

Hide the scrollbar

.lotgrafix-carousel {
    scrollbar-width: none;
}

.lotgrafix-carousel::-webkit-scrollbar {
    display: none;
}