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;
β
scroll-snap-align: center;
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">☉</a>
<a href="#2">☉</a>
<a href="#3">☉</a>
<a href="#4">☉</a>
</div>
Hope it is helpful!
π
Top comments (1)
Thx for sharing!
Unfortunately, the Browser support is pretty bad for the moment