Responsive 3D Carousel with jQuery – jR3DCarousel

DirectCode | February 13, 2020 | 3D, Animation, Awesome, CSS, Effects, Gallery, JavaScript, jQuery, Plugins, Responsive | No Comments

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.

jR3DCarousel - jQuery Responsive 3D Carousel — jR3DCarousel – jQuery Responsive 3D Carousel

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