This simple slider component uses pure HTML and CSS for horizontal sliding content, perfect for feature showcases.
HTML
<div class="ss-slider">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
</div>CSS
.ss-slider{
display:flex;
gap:12px;
overflow-x:auto;
padding:8px;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
}
.ss-slider::-webkit-scrollbar{
display:none;
}
.ss-slider{
scrollbar-width:none;
}
.slide{
min-width:160px;
padding:14px;
border-radius:12px;
background:var(--slide-bg);
color:var(--slide-text);
scroll-snap-align:start;
font-size:13px;
border:1px solid var(--slide-border);
}
:root{
--slide-bg:#f1f5f9;
--slide-text:#0f172a;
--slide-border:#e5e7eb;
}
@media (prefers-color-scheme: dark){
:root{
--slide-bg:#020617;
--slide-text:#e5e7eb;
--slide-border:#1f2937;
}
}Notes
- Horizontal slider
- Touch-friendly
- Lightweight component
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.