EspañolCSS scroll-snap carousel (slider) generator
Paste the images and choose how many show at a time. The swipe is handled by the browser itself with scroll-snap; the script only drives the arrows.
How to useA light carousel you swipe with your finger
Available in: 
CSS scroll-snap carousel (slider) generator: what it is for
Photo or card carousels are common on business websites, but slider libraries are heavy and sometimes make scrolling janky on phones.
This generator uses CSS scroll-snap, which snaps each item using the browser's native scrolling: swiping feels smooth, it works with trackpads and keyboards and needs almost no JavaScript. Choose how many items show at a time on desktop and phone (including one and a peek of the next, to show it can be swiped), the spacing and the corners. No auto-rotation, which hurts reading and accessibility (WCAG 2.2.2).
How to use
- Paste the image URLs.
- Choose how many show at a time and the spacing.
- Copy the code and paste it into your site.
When to use it
- Product showcase.
- Work photos and portfolio.
- Testimonial or service cards.
Frequently asked questions
Why scroll-snap and not a library?
Scroll-snap uses the browser's native scrolling: swiping on phones feels smooth like Instagram, it works with trackpads and keyboards and weighs nothing. Slider libraries often add dozens of KB of JavaScript to do the same thing.
Does the carousel advance on its own?
No, on purpose. Carousels that rotate on their own get in the way of reading and are an accessibility problem (WCAG 2.2.2 requires being able to pause anything that moves for more than 5 seconds). People who want to see more swipe or use the arrows.
Can I use it with text cards?
Yes. Replace the images with any content inside each list item; the size and snapping stay the same.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.