How to Build A Slider

#tutorial #html #css

Here's how to make a simple slider - they're easy to build and they look great on your page.

Here's the markup for your slider:

<div class="slider">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
</div>

Now add some CSS:

.slider {
    max-width: 300px;
    height: 300px;
    display: flex;
    overflow-x: auto;
}
.slide {
    max-width: 300px;
    flex-shrink: 0;
}

Let's add smooth scroll and snap each slide into place:

.slider {
    ...
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.slide {
    ...
    scroll-snap-align: center;
}

That's it! You made a slider. Along with some images and other content you want to add, it'll look something like this: