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>
<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>
<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: 100%;
margin: 0 auto;
}
img {
width: 290px;
height: 150px;
margin:0;
padding:0;
}
JavaScript
$('.slider').slick({
slidesToShow: 3,
slidesToScroll: 3,
dots: false,
infinite: true,
cssEase: 'linear',
arrows: false,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '90px',
slidesToShow: 1
}
}
]
});