DEV Community

Cover image for Carousel? You don't need JS.
Luca
Luca

Posted on

Carousel? You don't need JS.

Hi Dev!πŸ‘¨β€πŸ’»

Today i have founded a simple way for create your carousel easily without JS.

This is your "magic touch" πŸ§™:

scroll-snap-type: x mandatory;
Enter fullscreen mode Exit fullscreen mode

βž•

scroll-snap-align: center;
Enter fullscreen mode Exit fullscreen mode

With this properties, you can own a simple slidable carousel like my fiddle example:

If you want, you can add a dots, and anchor the images for scroll to a different image.

<!-- My images -->
<div class="images">
   <img id="1" src:"">
   <img id="2" src:"">
   <img id="3" src:"">
   <img id="4" src:"">
</div>

<!-- My dots -->
<div class="dots">
   <a href="#1">&#9737;</a>
   <a href="#2">&#9737;</a>
   <a href="#3">&#9737;</a>
   <a href="#4">&#9737;</a>
</div>
Enter fullscreen mode Exit fullscreen mode

Hope it is helpful!
πŸ™Œ

Top comments (1)

Collapse
 
roneo profile image
Roneo.org

Thx for sharing!

Unfortunately, the Browser support is pretty bad for the moment