Slick slider demo

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

HTML

<script src="https://github.com/kenwheeler/slick/blob/master/slick/slick.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<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" />
    dfgdfgdfgdfgdgd
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    bcdgdfgdgdfgd
  </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" />
    bcdgdfgdgdfgd<br>bcdgdfgdgdfgd<br>bcdgdfgdgdfgd<br>bcdgdfgdgdfgd<br>bcdgdfgdgdfgd<br>bcdgdfgdgdfgd<br>bcdgdfgdgdfgd<br>bcdgdfgdgdfgd<br>
  </div>
</div>

CSS

.slider {
    width: 650px;
    margin: 0 auto;
}
.slick-list {
    transition: all 0.3s linear;  
}
.slider img {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

JavaScript

$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    cssEase: 'linear',
    arrows: false
});

var sliderAdaptiveHeight = function(){
	var heights = []; 
	$('.slick-active').each(function(){
		heights.push($(this).height());
	});
	$('.slick-list').height(Math.max.apply(null, heights));
}

sliderAdaptiveHeight();

$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
	sliderAdaptiveHeight();
});