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.

$('.jRCarouselGallery').jRCarousel({
  slides: images
});

5. Config the carousel with the following options.

$('.jRCarouselGallery').jRCarousel({

  // 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.
showSlide(slideIndex)

// shows the previous slide from current slide by running animation
showPreviousSlide()

// shows the slide specified by the slideIndex by running animation
showNextSlide()

// returns the slide's jquery object specified by the slideIndex
getSlideByIndex(slideIndex)

// returns the current slide's jquery object
getCurrentSlide()

Change log:

2015-10-27

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

2015-10-26

• added public API

2015-10-25

• added navigators

2015-10-22

• added smooth transition between slides

2015-10-20

• 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.