Super fast lightweight sliders and carousels

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-x set to auto
• Indside that div, create a CSS grid using display:grid and grid-* options to create columns that will be the slides
• Use scroll snapping by utilizing scroll-snap-type: x mandatory and scroll-snap-align to 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

Comments

[Matthias Leu]

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.

[Mecanik]

Correct, same issue here. Also it has quite some performance implications, because it loads all the images instead of lazy loading them...

[Jafar]

Brilliant idea! Thank you!

[Leo Lafon]

Very nice, thank you for this!