jQuery Responsive 3D Image Carousel / Slider – jR3DCarousel Plugin

jQuery Responsive 3D Image Carousel / Slider – jR3DCarousel Plugin
The jR3DCarousel is a jQuery plugin for creating responsive 3d carousel with modern effects and multiple options. It is a simple way to cycle through an array of images with various 3D effects. It definitely makes your slider more awesome and it looks really cool with the help of lot’s of custom option you can easily customize your 3D Image Carousel.

Responsive 3D Image Carousel / Slider

jQuery Responsive 3D Image Carousel / Slider Features:

  • Modern effects
  • Responsive
  • Fullscreen Carousel
  • Tiny plugin (gzipped ~ 2.33KB, uncompressed ~ 7.29KB)
  • Keyboard navigation & mouse drag slide support
  • Touch devices navigation support
  • Infinite scroll
  • Multiple slideLayouts to maintain aspect ratio of images
  • Minimal configuration, easy to install
  • Useful public API for extending the functionalities like custom nav buttons.



Creating Responsive 3D Image Carousel / Slider

Libraries

jR3DCarousel plugin dependent on jQuery library, Include latest jQuery library fist after that add minified plugin library to create Responsive 3D Image Carousel / Slider.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/master/dist/jR3DCarousel.min.js">

There is 2 method for creating Creating Responsive 3D Image Carousel / Slider
1.Create an array of images for the carousel and passing to the function and set the options to customize the slider

HTML

<div class="jR3DCarouselGalleryDefault"></div>

JS

$(function() {   
$(".jR3DCarouselGalleryDefault").jR3DCarousel({
    "width": 471,
    "height": 276,
    "slideLayout": "fill",
    "animation": "slide3D",
    "animationCurve": "ease",
    "animationDuration": 1200,
    "animationInterval": 2000,
    "autoplay": true,
    "rotationDirection": "rtl",
    "navigation": "circles",
    "slides": [
        {
            "src": "https://unsplash.it/1347/942"
        },
        {
            "src": "https://unsplash.it/1322/901"
        },
        {
            "src": "https://unsplash.it/1360/897"
        },
        {
            "src": "https://unsplash.it/1277/927"
        },
        {
            "src": "https://unsplash.it/1268/892"
        },
        {
            "src": "https://unsplash.it/1259/854"
        },
        {
            "src": "https://unsplash.it/1343/789"
        }
    ]
});
});




2. Add images to the carousel using plain html

<div class="jR3DCarouselGalleryCustom">
			<div class="jR3DCarouselCustomSlide">
				<img src="https://unsplash.it/1327/772" />
				<div class="captions">This is custom text slide 1</div>
			</div>
			<div class="jR3DCarouselCustomSlide">
				<a href="http://vinayakjadhav.github.io/jR3DCarousel/" target="_blank">
					<img src="https://unsplash.it/1327/773" />
					<span class="captions">This is clickable slide 2</span>
				</a>				
			</div>
			<div class="jR3DCarouselCustomSlide">
				<img src="https://unsplash.it/1327/774" />
				<div class="captions">This is custom text slide 3</div>
			</div>
			<div class="jR3DCarouselCustomSlide">
				<img src="https://unsplash.it/1327/775" />
				<div class="captions">This is custom text slide 4</div>
			</div>
			<div class="jR3DCarouselCustomSlide">
				<img src="https://unsplash.it/1327/776" />
				<div class="captions">This is custom text slide 5</div>
			</div>
		</div>

JS

$(function() {  
$('.jR3DCarouselGalleryCustom').jR3DCarousel({
    width: 470,
    /* largest allowed width */
    height: 272,
    /* largest allowed height */
    slideLayout: 'fill',
    /* "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio) */
    animation: 'slide3D',
    /* slide | scroll | fade | zoomInSlide | zoomInScroll */
    animationCurve: 'ease',
    animationDuration: 1700,
    animationInterval: 2000,
    rotationDirection: 'ltr',
    slideClass: 'jR3DCarouselCustomSlide',
    autoplay: false,
    onSlideShow: slideShownCallback,
    /* callback when Slide show event occurs */
    navigation: 'circles' /* circles | squares */ ,
    perspective: 1200
  });
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.