CodingJack's 3D Carousel
- Last Update
- 8 March 2013
- Regular License
- $8
- Extended License
- $40
- Sales
- 244
* Before you purchase, please read the item description here *
Update 03/13/13 Updated to jQuery version 1.9.1 Update 02/06/13 Fixed grid fallback for IE10. If you’ve already purchased, download a new copy of the source files from your CodeCanyon downloads page and replace the “js” folder.
CodingJack’s 3D Carousel
Real 3D using CSS3 3D Transforms 3D Carousel will be shown on Chrome, Firefox, Safari, iOS and Android A grid style fallback will be displayed for Opera and IE (see screenshot below or test the preview in one of these browsers to view a live preview of the grid fallback)
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
Grid Fallback for IE and Opera
Technologies Used
HTML5 CSS3 jQuery 1.9.1 Jacked HTML5 Shiv Icons courtesy of Navdeep Raj
Special Notes
Support is not provided for older versions of jQuery and there is no guarantee that this item will work in older versions of jQuery CSS3 3D is still considered experimental technology by the major browsers. The settings that can be adjusted in the preview shown here demonstrate the different looks you can create. But if you wish to create a look that can’t be recreated in the preview (i.e. have a carousel with 100 items, etc.), please keep in mind that we’re bound by the technology’s limitations, and that there is no guarantee the particular settings you wish to use will allow for a smooth carousel experience. Although IE10 supports some parts of CSS3 3D, important parts that are needed for the carousel to work are not supported (specifically, transform-style: preserve-3d;). When IE10 adds support for this I’ll update the carousel. Until then all versions of IE, including IE10 will display the fallback grid.
More works by CodingJack