DEV Community

Cover image for How to Build A Slider
Jeannie Nguyen
Jeannie Nguyen

Posted on

1

How to Build A Slider

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>
Enter fullscreen mode Exit fullscreen mode

Now add some CSS:

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay