CSS only horizontal scrolling slider

Using CSS-Tricks for inspiration.

See the Pen css slider 5 by Teo Dragovic (@teodragovic) on CodePen.

My markup is a single wrapper element with .c-slides class.

<div class="c-slides">
   <div>one</div>
   <div>two</div>
   <div>three</div>
   <div>four</div>
   <div>five</div>
   <div>six</div>
</div>

Basic CSS (note that I’m using Sass here) for making horizontal scrolling slider is:

.c-slides {
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;

    & > * {
        scroll-snap-align: start;
        flex: 0 0 auto;
        width: 100%;
    }
}

See the Pen css slider 1 by Teo Dragovic (@teodragovic) on CodePen.

¶ Number of visible slides

To change the number of visible slides depending on the viewport add some breakpoints.

.c-slides {
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;

    & > * {
        scroll-snap-align: start;
        flex: 0 0 auto;
        width: 100%;

        // show two slides at 900px
        @media (min-width: 900px) {
            width: 50%;
        }

        // show three slides at 1200px
        @media (min-width: 1200px) {
            width: percentage(1/3);
        }
    }
}

See the Pen css slider 2 by Teo Dragovic (@teodragovic) on CodePen.

¶ CSS scrolling shadows

To produce left and right shadows we can add some linear gradients on the background. This is the trick I picked up from Lea Verou. $background needs to match the surrounding background while $shadow and $size can be tweaked for the best effect.

.c-slides {
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;

    $size: 8;
    $shadow: black;
    $background: #efefef;

    background:
        linear-gradient(to right, $background $size * 1%, transparent),
        linear-gradient(to right, transparent, $background ((100 - $size) * 1%)) 0 100%,
        linear-gradient(to right, $shadow, transparent $size * 1%),
        linear-gradient(to left, $shadow, transparent $size * 1%);
    background-attachment: local, local, scroll, scroll;
}

See the Pen css slider 3 by Teo Dragovic (@teodragovic) on CodePen.

¶ Scrollbar

Make scrollbar look a bit nicer across browsers using -webkit-scrollbar-* properties. Again, the background value of webkit-scrollbar-track needs to match the surrouding background.

.c-slides {

    // ...other styles...

    &::-webkit-scrollbar {
        height: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
        background: #efefef;
    }
}

See the Pen css slider 4 by Teo Dragovic (@teodragovic) on CodePen.

¶ Final

Here is final code snippet:

.c-slides {
    $size: 8;
    $shadow: black;
    $scrollbar-color: #ddd;
    $background: white;

    display: flex;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;

    background:
        linear-gradient(to right, $background $size * 1%, transparent),
        linear-gradient(to right, transparent, $background ((100 - $size) * 1%)) 0 100%,
        linear-gradient(to right, $shadow, transparent $size * 1%),
        linear-gradient(to left, $shadow, transparent $size * 1%);
    background-attachment: local, local, scroll, scroll;

    &::-webkit-scrollbar {
        height: 10px;
    }

    &::-webkit-scrollbar-thumb {
        background: $scrollbar-color;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
        background: $background;
    }

    & > * {
        scroll-snap-align: start;
        flex: 0 0 auto;
        width: 100%;

        // show two slides at 900px
        @media (min-width: 900px) {
            width: 50%;
        }

        // show three slides at 1200px
        @media (min-width: 1200px) {
            width: percentage(1/3);
        }
    }
}