Slick slider demo

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

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>
<h3>uncomment the third slide and randomize() works in FF...</h3>
<div class="slider">
  <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>

CSS

.slider {
  width: 650px;
  margin: 0 auto;
}

JavaScript

$.fn.randomize = function(selector) {
    var $el = selector ? $(this).find(selector) : $(this).children(),
      $pars = $el.parent();

    $pars.each(function() {
      $(this).children(selector).sort(function(chA, chB) {
        if ($(chB).index() !== $(this).children(selector).length - 1) {
          return Math.round(Math.random()) - 0.5;
        }
      }.bind(this)).detach().appendTo(this);
    });
    return this;
  };

  $('.slider').randomize().slick({
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 1000,
    dots: true,
    fade: true,
    arrows: true
  });