slick.jsで左右の画像をチラ見せするスライダーの設定方法について

画像スライダー、カルーセル表示を実装するのにはjQueryのプラグインがよく使われます。プラグインといっても色々な種類がありどれを使ったら良いのか迷ってしまいますが、1つのプラグインでスライダー、カルーセルを実装できたらうれしいですよね。また、最近ではスマホ対策が重要になっていますが、スマホでの表示でも使えるスワイプに対応していると使い勝手は良いのではないでしょうか。

slick.jsを使って左右の画像をチラ見せするメイン画像スライダーのサンプル

ネットショップ運営の気になる備忘録

 

15 Users

55 Pockets

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の気になる備忘録

 

4 Users

15 Pockets

楽天イベントバナーをスライド表示・掲載期間を設定する方法

サンプルソース

<link rel="stylesheet" type="text/css" href="slick.css">
<link rel="stylesheet" type="text/css" href="slick-theme.css">
<script type="text/javascript" src="jquery.min.js"  ></script>
<script type="text/javascript" src="slick.min.js"></script>

<script>
$("document").ready(function(){
  $('.mypattern').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    speed: 800,
    dots: true,
    arrows: false,
    centerMode: true,
    centerPadding: '10%'
  });
}); 
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .slider {
    width: 90%;
    margin: 0 auto 80px;
  }
  .slick-slide img {
    width: 100%;
    height: auto;
  }
  .mypattern{
    width: 100%;
  }
  .mypattern .slick-slide{
    margin: 5px;
  }
</style>

<div class="content">
  <div class="slider mypattern">
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
    <div><a href="#"><img src="画像URL"></a></div>
  </div>
</div>

1行目から4行目で必要なファイルを読み込んでいます。slick.js等の必要ファイルは過去記事等を参考にしてみてください。

6行目から18行目でslick.jsの実行する際の記述をしています。自動スライドを有効、切り替える間隔秒数、切り替え秒数、ナビゲーション等を実行時に指定できるオプションで設定しています。

今回の左右のチラ見せという部分でいうと、過去記事のオプションについての記述部分にも記載が抜けていた内容になりますが、起動時のオプションの記述に下記を加えるだけです。
centerMode: true,
centerPadding: ‘10%’

中央寄せはcenterModeで、centerPaddingで左右の画像と余白を指定することができます。スライダー表示には左右の矢印等や黒丸などのナビゲーション、小さい画像(サムネイル画像)を表示して他にどんな画像があるのか切り替えたり見せたりしますが、左右にチラ見せすることで次はどんな画像があるのか、1つ前にはどんな画像あったのか、わかりやすいのではないでしょうか。

41行目から51行目がタグの記述箇所です。<div class=”slider mypattern”>内に表示したい画像の数だけdiv a imgを記述します。

centerPadding: ‘10%’の場合

centerPadding: ‘20%’にした場合

centerPaddingの値を指定すれば、左右のチラ見せ具合を調整することができます。

中央の画像を目立たせる方法

中心のメイン画像を目立たせるように、CSSで左右の見切れている箇所を調整することも可能です。下記にいくつかサンプルを掲載してみます。

左右のメイン画像ではない箇所を指定するには

.mypattern .slick-slide:not(.slick-center) {
  左右のセンター以外の箇所に指定したい内容を記述
}

CSSで左右の画像を白黒

  .mypattern .slick-slide:not(.slick-center) {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.2s linear;
  }

CSSで左右の画像を透過

  .mypattern .slick-slide:not(.slick-center) {
    -webkit-filter: opacity(70%);
    -moz-filter: opacity(70%);
    -o-filter: opacity(70%);
    -ms-filter: opacity(70%);
    filter: opacity(70%);
    transition: 0.2s linear;
  }

CSSで左右の画像をぼかす

  .mypattern .slick-slide:not(.slick-center) {
    -webkit-filter: blur(5px);
    -moz-filter:blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    transition: 0.2s linear;
  }

CSSで左右の小さくする

  .mypattern .slick-slide:not(.slick-center) {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }

いかがでしょうか。CSSを使って左右の見切れている部分の見せ方をいくつか紹介してみました。それぞれ、単一の効果を指定していますが、組み合わせて設定することも可能です。

CSSで左右の画像を縮小+ぼかす

  .mypattern .slick-slide:not(.slick-center) {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);

    -webkit-filter: blur(5px);
    -moz-filter:blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
  }

CSSで見せ方を少し工夫すれば、面白いスライダーにカスタマイズすることも可能です。ぜひ、活用してみてください。

スライダーに関する別記事

ネットショップ運営の気になる備忘録

 

6 Pockets

jQueryを使わないレスポンシブ対応の画像スライダー、カルーセル表示「Swiper.js」