jr3dcarousel

    1.0.4 • Public • Published

    jR3DCarousel

    jQuery Responsive 3D Carousel - jR3DCarousel by Vinayak Rangnathrao Jadhav

    jR3DCarousel is a derived from the origin project - jRCarousel

    jR3DCarousel is a jQuery plugin for responsive 3d carousel with modern effects and multiple options.

    Features

    • Modern effects
    • Responsive
    • Fullscreen Carousel
    • Tiny plugin (gzipped ~ 2.28KB, uncompressed ~ 7.04KB)
    • 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.

    Live Demo

    Click here for Live Demo.

    animationnew

    Installation

    Using npm

    npm install jr3dcarousel
    

    Using bower

    bower install jR3DCcarousel		Or		bower install jr3dcarousel
    

    old school way

    <!-- add jQuery if not already present in your project -->
    
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    <!-- add jR3DCarousel plugin -->
    
    <script src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/v1.0.0/dist/jR3DCarousel.min.js"></script>
    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 */
    });
    
    Images source provided in javascript
    <div class="jR3DCarouselGallery"></div>
    var myjR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({
                                slides: slides
                            });
    
    Slides using custom template by adding some class e.g. mySlide
    <div class="jR3DCarouselGallery">
      <div class="mySlide"><img src="http://lorempixel.com//800/351" /></div>
      <div class="mySlide"><img src="http://lorempixel.com//800/352" /></div>
      <div class="mySlide"><img src="http://lorempixel.com//800/353" /></div>
      <div class="mySlide"><img src="http://lorempixel.com//800/354" /></div>
      <div class="mySlide"><img src="http://lorempixel.com//800/355" /></div>
    </div>
    
    
    var myjR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({
                                slideClass: 'mySlide',
                            });
    
    

    Public API

    • ##### showSlide(slideIndex) : shows the slide specified by the slideIndex by running animation, the slideIndex starts from 0.

    • ##### showPreviousSlide() : shows the previous slide from current slide by running animation

    • ##### showNextSlide() : shows the slide specified by the slideIndex by running animation

    • ##### getSlideByIndex(slideIndex) : returns the slide's jquery object specified by the slideIndex

    • ##### getCurrentSlide() : returns the current slide's jQuery object

    • ##### playCarousel() : starts the carousel & plays on

    • ##### pauseCarousel() : pauses the carousel

    • ###### Sample Usage of public API

    var myjR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({
                                slides: slides
                            });
    
    myjR3DCarousel.showSlide(0);
    myjR3DCarousel.showPreviousSlide();
    myjR3DCarousel.showNextSlide();
    myjR3DCarousel.playCarousel();
    myjR3DCarousel.pauseCarousel();
    var slide = myjR3DCarousel.getSlideByIndex(1);
    var currentSlide = myjR3DCarousel.getCurrentSlide();
    

    Install

    npm i jr3dcarousel

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • vinayakjadhav