Slick slider demo

by Raloynner

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>
<h2>Slider demo</h2>
<div class="slider fade">
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png"/>
    </div>
  </div>  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png"/>
    </div>
  </div>
</div>

CSS

.slider{
    width: 560px;
    margin: 0 auto;
}
img{
  width: 100%;
}
.slick-slide{
  opacity: 0.5;
}
.slick-slide.slick-active{
  opacity: 1;
}

JavaScript

$('.slider').slick({
  dots: true,
  slidesToShow: '3',
  infinite: true,
  speed: 500,
  cssEase: 'linear',
centerMode: true,
});