【jQuery】スライダー(slick)で次の画像をチラ見せさせる方法のデモページ

※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)

このページの内容が難しいと感じた方はこちら

スポンサーリンク

首都圏のIT・営業職求人多数。マイナビの人材紹介サービス≪マイナビエージェント≫へ

CSS

.slider {
  width: 768px;
  margin: 30px auto 0;
}
.slider .slick-list {
  padding: 0 30% 0 0!important;
}
.slider li {
  margin: 0 0.5%;
}

.slider li figcaption {
  margin: 10px 0 0;
}

@media screen and (max-width:640px){
  .slider {
    width: 100%;
  }
}
  

JavaScript

$(function(){
  $('.slider').slick({
    autoplay:true,
    arrows: false,
    centerMode: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    slidesToShow: 1
  });
});