Lightweight Cross-fading Carousel Plugin For jQuery

Image Slider is a jQuery plugin which allows to display images stored in a same folder in an infinite-looping carousel interface with a crossfade transition effect.

How to use it:

1. Include jQuery library and the jQuery image slider's JS and stylesheet files in the page.

<link rel="stylesheet" href="image-slider.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="image-slider.js"></script>

2. Include the Font Awesome for navigation arrows.

<link rel="stylesheet" href="font-awesome.min.css">

3. Put your images in the same folder and make them have the same file type and extension: photo-01.jpg, photo-02.jpg, photo-0x.jpg, etc.

4. Add the first images into the carousel:

<div id="image-slider">
  <img id="slider-image" src="photos/photo-01.jpg">
  <div id="slider-arrows">
    <a href="javascript:void(0);" id="previous-img">
      <span><i class="fa fa-chevron-left"></i></span>
    </a>
    <a href="javascript:void(0);" id="next-img">
      <span><i class="fa fa-chevron-right"></i></span>
    </a>
  </div>
  <div id="slider-circles"></div>
</div>

5. Initialize the plugin and specify the number of images embedded in the slider.

// setImgSlider(imgCount, imgTimerInterval)
setImgSlider(5, 5000);

---

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