carousel scroll-snap slider horizontal responsive css-only product image carousel without JS testimonial slider on mobile portfolio project showcase horizontal card scroller need carousel without JavaScript library want snap-to-item scrolling behavior need responsive horizontal scroller
Carousel Snap
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/carousel-snap.json Preview
Background
Customize
Quick Start
<div class="carousel-snap"><div class="carousel-snap-item">Card 1</div><div class="carousel-snap-item">Card 2</div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 997 bytes · 47 lines
- Custom Properties
-
--carousel-gap--carousel-peek--carousel-radius - Classes
-
.carousel-snap.carousel-snap-item
carousel scroll-snap slider horizontal responsive css-only
CSS-only horizontal carousel using scroll-snap-type: x mandatory. Items snap to position on swipe/scroll. Responsive breakpoints: 1 card on mobile (with peek edges), 2 on tablet, 3 on desktop. Hidden scrollbar for clean look.
Image carousel
<div class="carousel-snap">
<div class="carousel-snap-item">
<img src="https://picsum.photos/seed/1/600/400" alt="Slide 1" class="w-full h-64 object-cover">
</div>
<div class="carousel-snap-item">
<img src="https://picsum.photos/seed/2/600/400" alt="Slide 2" class="w-full h-64 object-cover">
</div>
<div class="carousel-snap-item">
<img src="https://picsum.photos/seed/3/600/400" alt="Slide 3" class="w-full h-64 object-cover">
</div>
<div class="carousel-snap-item">
<img src="https://picsum.photos/seed/4/600/400" alt="Slide 4" class="w-full h-64 object-cover">
</div>
</div>Card carousel with peek
<div class="carousel-snap" style="--carousel-peek: 3rem; --carousel-gap: 0.75rem;">
<div class="carousel-snap-item rounded-xl border border-white/10 bg-white/5 p-6">
<h3 class="font-semibold text-white">Feature 1</h3>
<p class="mt-2 text-sm text-white/70">Description text here.</p>
</div>
<!-- more items -->
</div>