2 Pure CSS5 with JSPublished 2026-10-05Free · no sign-up
Seven image sliders: a script-free scroll-snap slider, the classic arrows and dots, a cross-fade that can be paused, a product gallery with thumbnails, a slider that peeks at the next slide, a before and after comparison and a vertical story feed.
Slides in a horizontal scroll container with scroll-snap-type, so each swipe or trackpad scroll lands neatly on a slide. It needs no script, works with the arrow keys once focused, and the slides are a labelled list. The images are gradient stand-ins.
The classic slider: previous and next arrows and a row of dot buttons. The dots are buttons named Slide 1, 2 and 3 with aria-current on the active one, and a visually hidden live region announces the slide number politely.
var r = document.querySelector('.is2'), tr = r.querySelector('.tr'), ss = r.querySelectorAll('.s'), dots = r.querySelectorAll('.dots button'), live = r.querySelector('.sr'), i = 0, n = dots.length;
function go(k) {
i = (k + n) % n; tr.style.transform = 'translateX(' + (-100 * i) + '%)';
ss.forEach(function (s, j) { s.inert = j !== i; });
dots.forEach(function (d, j) { if (j === i) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current'); });
live.textContent = 'Slide ' + (i + 1) + ' of ' + n;
}
r.querySelector('.pv').onclick = function () { go(i - 1); };
r.querySelector('.nx').onclick = function () { go(i + 1); };
dots.forEach(function (d, j) { d.onclick = function () { go(j); }; });
03. Cross-Fade Slider with Pause
SliderFade
Slides stacked in one grid cell fade into each other instead of sliding. Only the active slide is reachable by assistive technology because the others are inert, and the Pause button stops the automatic rotation, which any auto-advancing slider must offer. It starts paused for reduced motion.
var ss = document.querySelectorAll('.is3 .s'), b = document.querySelector('.is3 button'), i = 0, paused = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (paused) { b.setAttribute('aria-pressed', 'true'); b.textContent = 'Play'; }
setInterval(function () {
if (paused) return;
ss[i].classList.remove('on'); ss[i].inert = true;
i = (i + 1) % ss.length; ss[i].classList.add('on'); ss[i].inert = false;
}, 3000);
b.onclick = function () { paused = !paused; b.setAttribute('aria-pressed', paused); b.textContent = paused ? 'Play' : 'Pause'; };
04. Slider with Thumbnail Strip
SliderGallery
A product gallery: a large image and a row of thumbnail buttons below it. Each thumbnail is a button with aria-pressed, and choosing one swaps the large image and its accessible name. The thumbnail row scrolls sideways when there are more than fit.
View code
<div class="is4"><div class="big" style="--g:linear-gradient(135deg,#e0e7ff,#818cf8)" role="img" aria-label="Lamp, front view"></div><div class="th"><button type="button" aria-pressed="true" style="--g:linear-gradient(135deg,#e0e7ff,#818cf8)" data-l="Lamp, front view" aria-label="Front view"></button><button type="button" aria-pressed="false" style="--g:linear-gradient(135deg,#fef3c7,#f59e0b)" data-l="Lamp, switched on" aria-label="Switched on"></button><button type="button" aria-pressed="false" style="--g:linear-gradient(135deg,#dcfce7,#22c55e)" data-l="Lamp, in a living room" aria-label="In a living room"></button><button type="button" aria-pressed="false" style="--g:linear-gradient(135deg,#fce7f3,#db2777)" data-l="Lamp, base detail" aria-label="Base detail"></button></div></div>
var big = document.querySelector('.is4 .big'), bs = document.querySelectorAll('.is4 .th button');
bs.forEach(function (b) { b.onclick = function () {
bs.forEach(function (x) { x.setAttribute('aria-pressed', x === b); });
big.style.setProperty('--g', b.style.getPropertyValue('--g')); big.setAttribute('aria-label', b.dataset.l);
}; });
05. Peek Slider Showing the Next Slide
SliderMobile
Slides are 82 percent of the width, so part of the next one peeks in from the side, a clear hint that there is more to swipe. scroll-snap-align: center with side margins keeps the active slide centred with its neighbours visible.
Drag the handle to compare a before and after image. The handle is a native range input stretched invisibly over the image, so it works with arrow keys and screen readers out of the box, and its value sets the clip-path of the top image.
View code
<div class="is6"><div class="a" aria-hidden="true">Before</div><div class="b" aria-hidden="true">After</div><input type="range" min="0" max="100" value="50" aria-label="Before and after split, percent"></div>
var w = document.querySelector('.is6'), r = w.querySelector('input');
r.addEventListener('input', function () { w.style.setProperty('--p', r.value + '%'); });
07. Vertical Story Slider
SliderVertical
A full-height vertical slider, like short-video or story feeds: one slide per screen with scroll-snap on the y axis. Progress bars at the top show how many stories there are, and the filled ones update from an IntersectionObserver.
View code
<div class="is7"><div class="bars" aria-hidden="true"><i class="on"></i><i></i><i></i></div><div class="v" tabindex="0" role="region" aria-label="Stories, scroll down"><section style="--g:linear-gradient(160deg,#6366f1,#0f172a)">New collection drops Friday</section><section style="--g:linear-gradient(160deg,#db2777,#0f172a)">Behind the scenes at the studio</section><section style="--g:linear-gradient(160deg,#0d9488,#0f172a)">How we pack your order</section></div></div>
var bars = document.querySelectorAll('.is7 .bars i'), secs = document.querySelectorAll('.is7 section');
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { var k = [].indexOf.call(secs, e.target); bars.forEach(function (b, j) { b.classList.toggle('on', j <= k); }); } }); }, { root: document.querySelector('.is7 .v'), threshold: .6 });
secs.forEach(function (s) { io.observe(s); });
About these CSS Image Sliders
Start with scroll-snap
A horizontal scroll container with scroll-snap-type: x mandatory already swipes on phones, scrolls with trackpads and needs no JavaScript. Add buttons on top only if you need them.
Label the carousel
Give the slider a name (aria-label="Featured rooms"), mark slides as groups named 1 of 3, and announce changes politely. Hidden slides should be inert so focus cannot land inside them.
Auto-play needs a pause button
Content that moves on its own for more than five seconds must have a way to pause it. Better still, do not auto-advance at all, or start paused when reduced motion is requested.
Use native controls where you can
The comparison slider is a stretched <input type="range">, so arrow keys, touch and screen readers work without any custom handling.
Frequently asked questions
Are image carousels bad for conversions?
Auto-rotating hero carousels often are, because people miss slides. Swipeable galleries of related images work well.
How do I add real images?
Replace each gradient slide with an img that has width, height and alt attributes, and lazy-load the ones off screen.
Does the slider need a library?
No. The heaviest demo uses about ten lines of script.