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

公開日: 

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

スポンサードリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

楽天市場向け無料ツール

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が間違っている等の可能性があります。

Your Message

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

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

スポンサードリンク

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

PAGE TOP ↑