Responsive 3D Carousel with jQuery – jR3DCarousel
A nice solution of responsive 3D Carousel with jQuery.
jR3DCarousel – Responsive 3D Image Carousel
jR3DCarousel is a jQuery responsive carousel plugin that provides a simple way to cycle through an array of images with various 3D effects.
Main features:
– Full width or fixed width
– 5 built-in cool effects: slide, fade, scroll, slide3D, and scroll3D
– Infinite loop / scroll
– Autoplay
– Custom easing effects
– Very simple to implement
– Modern effects
– Responsive
– Fullscreen Carousel
– Tiny plugin (gzipped ~ 2.33KB, uncompressed ~ 7.29KB)
– Keyboard navigation & mouse drag slide support
– Touch devices navigation support
and more. Rich API – check the docs.

Setup
npm install jr3dcarousel
Sample
// Setup images source var slides = [ {src: 'http://lorempixel.com//1366/768'}, {src: 'http://lorempixel.com//1366/761'}, {src: 'http://lorempixel.com//1366/762'}, {src: 'http://lorempixel.com//1366/763'}, {src: 'http://lorempixel.com//1366/764'}, {src: 'http://lorempixel.com//1366/765'}, {src: 'http://lorempixel.com//1366/766'} ]; // Minimal configuration with defaults var myjR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({ slides: slides });
Configuring all available options
$('.jR3DCarouselGallery').jR3DCarousel({ width :1349, /* largest allowed width */ height: 668, /* largest allowed height */ slides : [{},{}], /* array of images source, optional in case of custom template */ slideLayout : 'fill', /* "contain"-fit as per to aspect ratio | "fill"-stretches to fill | "cover"-overflows but maintains ratio */ perspective: 0, /* perspective - default is dynamic, perpendicular */ animation: 'slide3D', /* slide | slide3D | scroll | scroll3D | fade */ animationCurve: 'ease', /* ease | ease-in | ease-out | ease-in-out | linear | bezier */ animationDuration: 700, /* duration of animation transition in milliseconds */ animationInterval: 2000, /* interval between transitions or per slide show time in milliseconds */ autoplay: true, /* start playing Carousel continuously, pauses when slide is hovered */ controls: true, /* control buttons */ slideClass: 'jR3DCarouselSlide',/* name of the class of slides in custom template */ navigation: 'circles', /* circles | squares | '' */ rotationDirection: 'rtl', /* rtl - right to left | ltr - left to right */ onSlideShow: function(){} /* callback when slide show event occurs */ });
License: MIT
GitHub
https://github.com/vinayakjadhav/jR3DCarousel
Homepage
http://vinayakjadhav.github.io/jR3DCarousel
See also
3D Flipping Gallery with jQuery and CSS3 – tutorial and example
Slick carousel for web projects
Responsive ReactJS carousel gallery: react-image-gallery
jQuery circular carousel plugin
Enjoy Responsive 3D Image Carousel.
Related Posts
-
Awesome CSS and jQuery slide in panel
1 Comment | Jul 22, 2016 -
Arctext.js – Curving Text with CSS3 and jQuery
No Comments | Nov 7, 2015 -
JCoverflip – jQuery image slider
No Comments | Oct 26, 2015 -
Table of Contents jQuery Plugin
No Comments | Nov 30, 2015