Sliders and Carousels
Sliders and carousels are on most websites used for presenting all kinds of content - and especially also to show images for i.e. product details etc.
They all need to work really well on mobile - meaning that touch support, performance and UX has to be really good.
Old world
The solution to this is a using some sort of javascript library that handles this. Most of these work using a number of events on the DOM to detect touch, movement, dragging etc. And then a good chunk of code to handle the actual sliding using animations and moving around with html elements.
The result of this approach are some relatively big javascript libraries that easily takes 25-100kb - and because of the amount of js, it is not easy to get really good performance, WCAG support is somewhat lagging and setup is relatively complex.
New world
Luckily browsers evolve quickly and the sliding and carousel experience can be handled using native browser features - and simple div overflows.
By utilizing scrolling, especially the touch support can be greatly improved since all browsers, devices and their input methods supports scrolling.
Also loading, event listeners, animations, moving divs around are no longer needed - the browser takes care of this.
The result - super performance and touch support!
The basic approach
- Create a div with
overflow-xset to auto - Indside that div, create a CSS grid using
display:gridand grid-* options to create columns that will be the slides - Use scroll snapping by utilizing
scroll-snap-type: x mandatoryandscroll-snap-alignto ensure slides stick to the sliding container.
<style>
.slider {
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
display: grid;
grid: auto / auto-flow max-content;
grid-auto-rows: 100%;
grid-auto-columns: 100%;
grid-auto-flow: column;
grid-gap: 1rem;
align-items: center;
height: 100%;
}
.slider>* {
scroll-snap-align: start;
}
</style>
<div class="slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
<div>Slide 4</div>
</div>
That's it - and then a little bit of JS on top to enable navigation buttons and indicators, some css to style the thing up and voila!!
Based on this concept and bringing it to live on real solutions this is now wrapped and packed in a small css and javascript module.
See examples and documentation at https://swiffyslider.com/
Find it on Github https://github.com/dynamicweb/swiffy-slider
Or take it from NPM:
npm install swiffy-slider
Top comments (3)
Tried to work with it, hardly encountered a more unflexible slider like this. As soon as you do something that is not in their examples (e.g. putting more complex elements in the slide containers), the whole thing breaks and and the javscript stops working.
Brilliant idea! Thank you!
Very nice, thank you for this!