WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

CodingJack's 3D Carousel

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


CodingJack's 3D Carousel - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

FOLLOW ENVATO INTERACTIVE GOODS FOR WEBMASTERSFOLLOW TWITTER GET NOTIflED ABOUT NEW PttINS

CodingJack’s 3D Carousel

-> WORDPRESS VERSION ALSO AVAILABLE

  • 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 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
true SS3 Transforms.d1Iar,rI

Grid Fallback for IE

SS3 Traams This some text and this some more and this some more

Technologies Used

Special Notes

  • 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.

  • The preview shown here on CodeCanyon with all the carousel controls is not included with the download source, but if for some reason you think having those controls is important for your website visitors, feel free to send me an email from my profile page and I’ll send you the preview’s source files.

  • Images used in the preview are for demonstration purpose only and are not included in the download source

  • This is NOT a WordPress Plugin

More works by CodingJack

jQuery Gallery

jQuery Banner Rotator

jQuery Banner Rotator

Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
4 September 12

Last Update:
1 December 13

Compatible Browsers:
Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Keywords

eCommerce, eCommerce, All Items, 3d, 3d carousel, 3d transforms, carousel, css3, css3 transforms, css3 transitions, html5, icons, jquery, jquery carousel, menu, thumbnail gallery, thumbnail menu, thumbnails