CodingJack’s 3D Carousel
- Real 3D using CSS3 3D Transforms
- Works on Chrome, Firefox, Safari, iOS and Android
- Graceful grid style fallback for Opera and IE
Tablets and Phones with Touch Swipe
The carousel is supported on iOS and Android and includes touch swipe functionality. It looks great on a tablet and will even work on a smartphone. But because the carousel can appear small on smaller screens, I’ve included two special options for smartphones:
- Option to display a thumbnail grid instead (the “fallback” presentation)
- Option to transform the grid fallback into a responsive layout. View either preview from your phone for an example.
Customizable Options Include
- Choose to “auto spin” the carousel.
- Toggle the initial “zoom/spin” animation on and off
- Toggle the HTML5 Canvas “shine” hover effect on and off
- Choose to use image reflections
- Customize the 3D values shown in the previews
- Set the autoplay speed as well as the mouse interaction speed
- Item captions are optional
- Choose to auto-show item captions
- Hyperlinking is optional
Technologies Used
- HTML5
- CSS3
- jQuery
- Jacked
- HTML5 Shiv
- Icons courtesy of Navdeep Raj
More works by CodingJack
