Slick slider demo

http://community.sitepoint.com/t/how-to-make-a-mutliple-items-slider/194539/

by Sumesh KP

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="slideshow">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
  </div>
</div>
<br/>
<input type="range" id="range" >
<span class="pagingInfo"></span>

CSS

.slideshow {
    width: 800px;
    margin: 0 auto;
}

img {
    width: 200px;
    height: 200px;
}

JavaScript

var $status = $('.pagingInfo');
    var $slickElement = $('.slideshow');
    var $range = $('#range');

$slickElement.on('init reInit', function (event, slick){

        $range.attr('max',slick.slideCount);
        
        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = (currentSlide ? currentSlide : 0) + 1;
        
        $status.text(i + '/' + slick.slideCount);
    });

    $slickElement.on('afterChange', function (event, slick, currentSlide, nextSlide){
        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = (currentSlide ? currentSlide : 0) + 1;
        
        $status.text(i + '/' + slick.slideCount);
    });

    $slickElement.slick({
         slidesToShow: 4,
    slidesToScroll: 4,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    autoplay: true,
  	autoplaySpeed: 2000
    });