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

TOP > jQuery > 【jQuery】スライダー(slick)で次の画像をチラ見せさせる方法/Slick next image to Look just a little bit

【jQuery】スライダー(slick)で次の画像をチラ見せさせる方法/Slick next image to Look just a little bit

スポンサーリンク

コーディングテクニックの実装内容

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

実装所要時間:15分程度

CSS,JavaScriptの記述内容

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

$(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を指定すると片方だけスライド画像をチラ見せできます。

おすすめ記事

スポンサーリンク

「【jQuery】スライダー(slick)で次の画像をチラ見せさせる方法/Slick next image to Look just a little bit」への2件のフィードバック

コメントは受け付けていません。