Tiny Automatic Image Carousel Plugin For jQuery - jRCarousel

File Size: 10.3 KB
Views Total: 1727
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Tiny Automatic Image Carousel Plugin For jQuery - jRCarousel

jRCarousel is a super tiny (~2kb) jQuery carousel plugin that rotates automatically through an array of images with 'scroll' or 'slide' transition effects.

How to use it:

1. Load jQuery library and the jQuery jRCarousel plugin into the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jRCarousel.js"></script>

2. Create a carousel container as follow:

<div class="jRCarouselGallery"></div>

3. Create an array of images for the carousel.

var images = ['1.jpg','2.jpg','3.jpg']

4. Initialize the carousel plugin.

  slides: images

5. Config the carousel with the following options.


  // width of the carousel
  width : 800,

  // height of the carousel
  height: 356,

  // array of images
  slides: slides,  

  // "contain"-fit as per to aspect ratio
  // "fill"-stretches to fill 

  // "cover"-overflows but maintains ratio
  slideLayout : 'contain', 

  // slide | scroll | fade | zoomInSlide | zoomInScroll
  animation: 'slide',
  // animation speed
  animationSpeed: 400,
  // animation interval
  animationInterval: 4000,
  // enable autoplay
  autoplay: true,

  // callback when Slide show event occurs
  onSlideShow: show,

  // circles or squares
  navigation: 'circles'

6. Public methods.

// shows the slide specified by the slideIndex by running animation, the slideIndex starts from 0.

// shows the previous slide from current slide by running animation

// shows the slide specified by the slideIndex by running animation

// returns the slide's jquery object specified by the slideIndex

// returns the current slide's jquery object

Change log:


  • Added UMD pattern to support AMD, CommonJS, Browser global


  • added public API


  • added navigators


  • added smooth transition between slides


  • background color changed
  • fade, zoomInScroll, zoomInSlide animations added

This awesome jQuery plugin is developed by vinayakjadhav. For more Advanced Usages, please check the demo page or visit the official website.