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

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

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

スポンサーリンク

Web制作会社LIGが運営するWebデザインスクール

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,
    slidesToShow: 1
  });
});