DEV Community

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

Posted on

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

Top comments (0)