Super fast lightweight sliders and carousels

#javascript #css #webdev #performance

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!!