The latest iteration of the CSS 3D Carousel is much improved over the version I demonstrated a few months ago, although it still has a ways to go. The code is a little complex to explain in a single blog post, although I do plan to share aspects of its development in future articles. I’ve left the complete code at CodePen for you to play with, if you’re interested.
So what’s different in this version?
- Each image is contained in its own separate figure, with its own caption. (mouseover the forefront image to see its caption).
- The distribution of carousel images is made entirely in JavaScript, which handles an arbitrary number of elements: try removing some of the figures from the CodePen version, for example.
- Click-to-zoom is enabled on the foreground image.
- Keyboard controls are available: cursor right and left to rotate the carousel, Z to toggle zoom on the foreground image, and C to toggle its caption.
Improvements to come:
- I’m still struggling with a bug in desktop and mobile Safari, which displaces the
transform-origin-zcoordinate for the gallery, pushing it forward in the browser. I’m hoping that this will be fixed in iOS / Safari 7. (Update: it wasn’t, unfortunately). - Similarly, IE 10+ displays the carousel incorrectly due to its lack of support for
transform-style. - Display at small viewport sizes needs to be improved; I’ll add swipe gesture support once the Safari and IE display problem are licked.
- As the number of images in the gallery increases, the radius of the carousel should increase to fit them all.
- It’s my eventual goal to turn the CSS 3D Carousel Gallery into a bit of automated JavaScript: this will mean creating display fallbacks for earlier versions of IE and older browsers.
Photographs of ballet dancers competing in the IFBB European competition by Jack Devant, licensed under Creative Commons.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/sntEk
