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

公開日:  最終更新日:2022/08/27

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

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


以前の記事でjQueryのslick.jsを使ったスライダー、カルーセルの実装方法について紹介しました。1つのプラグインで大きめの画像を使ったヘッダーエリアのメイン画像スライダー、左右にスライドさせながら表示するカルーセル表示といったネットショップではよく見かけるパーツを手軽に実装できるjQueryプラグインです。



また、他にもslick.jsを使ったサンプルということで、楽天のイベントバナーを例にslick.jsとjavascriptを組み合わせてバナーの掲載期間を指定する方法を紹介したこともあります。

サンプルソース

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

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




Comment

  1. kuro より:

    初めて質問させていただきます。
    楽天ショップ運営開始から初めてホームページ作成を勉強しています。1年目の初心者です。
    過去ログ等も拝見させていただいて試行錯誤しております。

    上記ソースをコピペして
    3
    4
    としています。xxx.htmlと同一フォルダ内にあります。

    いざ楽天で表示させると、「ページが表示できません」となってしまいます。
    どこをどう直してよいのか皆目見当が付きません。
    ご教授いただければ幸いです。

    • kuro より:

      追記です。
      3
      4
      の後が空欄になってしまいました。正しくは
      3行目 script type=”text/javascript” src=”jquery-3.1.1.min.js”
      4行目 script type=”text/javascript” src=”slick.min.js”
      です。よろしくお願いします。

      • peacepopo より:

        kuro 様

        コメントありがとうございます。

        >「ページが表示できません」

        と表示されるのであれば、そもそもhtmlファイルがアップロードされてない、URLが間違っている可能性があります。

        下記の別記事に記載しておりますが、
        「カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ」
        http://peacepopo.net/blog-entry-191.html

        動作させるためには、
        xxx.html → サンプルソースを記述したファイル
        slick.css →ダウンロードしたファイル
        slick-theme.css →ダウンロードしたファイル
        slick.min.js →ダウンロードしたファイル
        fontsフォルダ一式 →ダウンロードしたファイル
        jquery.min.js →→ダウンロードしたファイル
        等のファイルが必要になります。

        GOLD直下に配置した場合は
        http://www.rakuten.ne.jp/gold/ショップID/xxx.html

        GOLD > slick フォルダ内に配置した場合
        http://www.rakuten.ne.jp/gold/ショップID/slick/xxx.html

        ダウンロードしたファイルが不足、読み込みが出来ていない場合でも、動作しない、見た目が崩れますがページ自体は表示されるはずです。
        「ページが表示できません」と表示されるのであれば、 xxx.html ファイルがアップロード出来ていない、URLが間違っている等の可能性があります。

  2. matboya より:

    3枚構成のcentermodeで左右の画像に透過をかけるパターンを試しました。

    1~2枚目、2~3枚目のスライド時は、スライドの動作スタート時に透過が切り替わりますが、3枚目から最初の1枚目の時だけは、スライドの動作終了時に透過処理が切り替わります。センターに移動する際の透過タイミングにずれが生じてしまいます。

    このタイミングを調整するには、どの様にしたら良いかご教授下さい。
    宜しくお願いします。

    • peacepopo より:

      コメントありがとうございます。
      すいません、3枚構成のcentermode左右の画像に透過のパターンで試してみたのですが、書かれているような現象を再現することができていません。
      画像の枚数など変更しても同様の現象になりますか?

      • matboya より:

        返信ありがとうございます。

        色々試した結果、やはり透過のタイミングのずれは解消されませんでした。

        試したことは
        1)同じページに、slickの別スライドを設置しているので、片方を削除してみる
        2)スライド3枚の構成を6枚に増やしてみる(奇数から偶数)
        3)divからリスト(ul li)に替えてみる
        4)HTMLタグ同士のスペースや行替えをなくし、連続した記載にしてみる
        5)最後は、HTML、CSSの若干のアレンジをやめて、丸々本ページのコピペにしてみる

        以上ですが、5)でも駄目だったので、何かほかの記載が意地悪していると思われます。他の方法を探ってみます。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑