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

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 スライダー（slick）で次の画像をチラ見せさせる方法の動画
5 CSS,JavaScriptの記述内容
6 実装のポイント

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

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

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

slickのテクニックでよく見かける「前後の画像をチラ見せ」に比べて、この方法はスライドを大きく表示できるので、画面の小さいスマホで実装すると効果的です。

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

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

実装所要時間は10分程度

>> DEMOはこちらから！（View Demo）

>> View Demo(English Page)

>> ページの読み込みが遅い場合はこちら

スライダー（slick）で次の画像をチラ見せさせる方法の動画

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%;
  }
}