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

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

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

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

コーディングテクニックの使いどころ

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

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は10分程度

CSS,JavaScriptの記述内容

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

$(function(){
  $('.slider').slick({
    autoplay:true,
    arrows: false,
    centerMode: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    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により上書きしています。

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク