あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】スライダー(slick)で次の画像をチラ見せする方法

【jQuery】スライダー(slick)で次の画像をチラ見せする方法

スポンサーリンク

実装内容

スライダーの左右画像をチラ見せする仕様はよく見かけますが、片方だけチラ見せする仕様はあまり見かけませんね。この演出はシンプルに実装できるのでサンプルを作成してみました。スライダーはslickを使用しています。

実装所要時間:15分程度

実装方法

実装に必要なスクリプトとスタイルはこれだけです。

$(function(){
  $('.slider').slick({
    autoplay:true,
    arrows: false,
    slidesToShow: 1
  });
});
.slider {
  width: 768px;
  margin: 30px auto 0;
}
.slider .slick-list {
  padding: 0 30% 0 0;
}
.slider li {
  margin: 0 40px;
}

【簡単な解説】
特に難しいことは行っていません。基本通りにslickの記述を行った後、.slick-listに右方向へpaddingを指定するだけで片方だけチラ見せすることが可能です。

スポンサーリンク