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

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

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

この記事は2018年9月24日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

今回はスライダーに関する内容です。スライダーの前後画像をチラ見せする仕様はよく見かけますが、片方だけチラ見せする仕様はあまり見かけませんね。片方だけでも綺麗に見せられるのでご紹介します。slickを問題なく設置できるスキルがあればコピペで実装できます。

実装所要時間:15分程度
難易度:初心者コーダーでも実装可能
jQueryスライダープラグイン : 「slick」を使用

使いどころ

前後画像をチラ見せに比べてスライドを大きく表示できるので、画面の狭いスマホで実装すると効果的です。

CSS,JavaScriptの記述内容

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

$(function(){
  $('.slider').slick({
    autoplay:true,
    arrows: false,
    centerMode: true,
    slidesToShow: 1
  });
});
.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%;
  }
}

実装のポイント

特に難しい記述はしていません。基本的なslickの記述をして.slick-listに右方向へpaddingを指定すると片方だけスライド画像をチラ見せできます。

極力CSSで!importantは使用したくないのですが、オプションでcenterMode: trueを指定しないとスライダーループ時に一瞬空白が発生してしまうので、centerPaddingを!importantにより上書きしています。

スポンサーリンク