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 goal to turn the CSS 3D Carousel Gallery into a JQuery plugin: this will mean creating display fallbacks for earlier versions of IE and older browsers.
Photographs used in this gallery example are of ballet dancers competing in the IFBB European competition photographed by Jack Devant, licensed under Creative Commons. Play with this code on CodePen