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

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

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

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay