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:
Top comments (0)