Basic Infinite Image Slider Plugin For jQuery

A simple jQuery slider plugin which converts a list of image into an infinite-looping carousel with a basic prev/next navigation.

How to use it:

1. Create a list of images and insert it into a DIV container with the class of 'slider'.

<div class="slider">
  <ul>
    <li><img src="img/img1.jpg" alt="image"></li>
    <li><img src="img/img2.jpg" alt="image"></li>
    <li><img src="img/img3.jpg" alt="image"></li>
    <li><img src="img/img4.jpg" alt="image"></li>
    ...
  </ul>
</div>

2. Create a basic next/prev navigation for the slider.

<div id="slider-nav">
  <button data-dir="prev">Prev</button>
  <button data-dir="next">Next</button>
</div>

3. The basic CSS styles for the slider & navigation.

.slider ul {
  width: 10000px;
  list-style: none;
}

.slider li { float: left; }

.slider li img {
  max-width: 100%;
  width: 100%;
}

#slider-nav {
  display: none;
  margin: 15px auto 0;
  text-align: center;
}

#slider-nav button {
  padding: 1em;
  margin-right: 1em;
  border-radius: 10px;
  cursor: pointer;
}

4. Include the latest jQuery JavaScript library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

5. The core JavaScript to active the image slider. Add the following JavaScript snippets into your JS file, or include the slider.js directly after you've included the jQuery library.

(function($){
  var sliderUl = $('div.slider').css('overflow', 'hidden').children('ul'),
    imgs = sliderUl.find('img'),
    imgsWidth = imgs[0].width,
    imgsLength = imgs.length,
    current = 1,
    totalImgsWidth = imgsWidth * imgsLength;
    


$('#slider-nav').show().find('button').on('click', function(){
    var $this = $(this),
      direction = $this.data('dir'),
      loc = imgsWidth; //600

    (direction === 'next') ? ++current : --current;

    if (current === 0) {
      current = imgsLength;
      loc = totalImgsWidth - imgsWidth;
      direction = 'next';

    }else if (current - 1 === imgsLength){ // Are we at end. should we reset?
      current = 1;
      loc = 0;
    };

    transition(sliderUl , loc , direction);

});


function transition(container, loc , direction){
  var unit; // -= or +=

  if (direction && loc !== 0) {
    unit = (direction === 'next') ? '-=' : '+=';
  };

  console.log(unit);

  container.animate({
    'margin-left' : unit ? (unit + loc) : loc
  });

}


})(jQuery);

---

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