OneTaskBy Tim King · Updated
Coverflow Carousel
3D Cover Flow Slider in HTML and CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Coverflow Carousel works
A coverflow carousel shows one slide facing forward in the centre while the slides either side tilt away in 3D, like flipping through a stack of album covers. Enter your slide titles, set the angle, spacing and size, and copy the HTML, CSS and JavaScript.
Cover flow suits galleries where each item is visual and square, such as album art, book covers, app screenshots and product shots. It gives a strong sense of place, because visitors can see what comes before and after the current slide.
How the coverflow carousel works in 3D
All the slides sit in the same grid cell, stacked on top of each other, inside a container with
perspective. A few lines of JavaScript give each slide its distance from the current one as CSS
custom properties. The CSS turns that distance into a sideways shift, a push back in depth and a
rotateY turn, so the side slides tilt towards the centre. A transition animates every change,
and slides more than three steps away fade out.
Controls and accessibility
The arrow buttons, the left and right arrow keys and a click on any side slide all move the carousel. A live caption announces the position and title, such as "4 of 7: Summer Static", and slides that are not in the centre are hidden from screen readers so only the current one is read. With reduced motion turned on, slides change instantly without the animation.
FAQ
How do I use real images in the coverflow?
Put an <img> inside each .cf-art block, or replace the block with the image, and give it
width: 100%, aspect-ratio: 1 and object-fit: cover. Add alt text that describes each cover,
since the caption only shows the title.
Why do the side slides look squashed?
That is the perspective effect of the rotateY turn. Lower the side slide angle for a flatter
look, or raise the spacing so the tilted slides overlap less. An angle of zero gives a flat,
overlapping row.
Does it work on phones?
Yes. Each slide is at most 60 percent of the carousel width, so the centre slide stays large while the side slides peek in on narrow screens. The buttons are large enough to tap, and tapping a side slide brings it to the centre.
Can it start on the first slide instead of the middle?
Yes. Change the last line of the script from go(Math.floor(items.length / 2)) to go(0). The
middle start is the default because it shows slides on both sides, which makes the 3D effect clear.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Card Carousel
Build a scroll snap slider of clickable cards with arrows.
Testimonial Carousel
Build an accessible swipeable testimonial slider on CSS scroll snap.
Image Gallery Builder
Build a responsive CSS grid photo gallery with captions and hover effects.
CSS Transform Generator
Compose translate, rotate, scale and skew into one transform value.
Flip Card
3D flip card with front and back faces, no JavaScript.