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

公開日: 

この記事のタイトルとURLをコピーする

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

スポンサードリンク

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

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

スポンサードリンク
FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

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

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

ヒートマップ分析も出来る無料のアクセス解析

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Your Message

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

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

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑