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

公開日:  最終更新日:2017/03/24

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

カルーセル表示を実装するならjQueryの「slick.js」が簡単でおすすめかも
商品を陳列する際によく使われているカルーセル表示について、すでにショップページで利用している方も多いのではないでしょうか。そんなカルーセルを実装するためのjQueryプラグインもたくさんあり、どれを使ったら良いかわかりませんよね。

slick.jsのおすすめバナー

そんな中このプラグインさえ抑えておけばカルーセル表示は大丈夫というプラグインを紹介します。

スポンサードリンク

カルーセル表示の細かい設定が可能な「slick.js」自由度も高く、レスポンシブにも対応

jquery slick
slick – the last carousel you’ll ever need
上記サイトにて動作デモが確認出来ます。

カルーセル表示と一言でいっても見た目や動きは様々です。複数アイテム同時に切り替わってほしい、自動的に動いてほしい、水平方向・垂直方向の動きを切り替えたいなど細かい指定はたくさんあると思います。デモを見てもらえばわかりますが「slick.js」を使えば大抵のことはオプションを指定するだけ出来てしまいます。

カルーセル「slick.js」を導入している事例

楽天 子どもドレス キャサリンコテージ
実際に導入しているショップがないか探してみました。
そして、見つけたのが楽天ショップオブザイヤー受賞の常連の子供ドレスならキャサリンコテージを見るとカルーセル表示を使って商品を陳列しています。

バナーが並んでいる部分より少し下にある
新着アイテムをjquery slickで表示イメージ
新着アイテムを表示している部分にカルーセル表示が使われています。5つのアイテムが並んでおり自動的に5つのアイテムがスライドする仕組みになっています。可愛らしいドレスが次々と切り替わるので見ていても思わず注目してしまいます。

簡単な実装方法について

ダウンロードボタンの位置
kenwheeler/slick · GitHubより、赤枠のボタンをクリックしてファイルをダウンロードしてください。

ダウンロードしたファイルの中から
slick.css
slick-theme.css
slick.min.js
fontsフォルダ一式
の3つのファイルとfontsフォルダを使います。

また、http://jquery.com/よりjquery.min.jsもダウンロードしてください。

1枚ずつ切り替えるカルーセル表示について

実装サンプル1
サンプルソース sample1.html

<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(){
  $('.single-item').slick();
});	
</script>

<div class="main">
  <div class="single-item">
    <div><img src="画像URL"></div>
    <div><img src="画像URL"></div>
    <div><img src="画像URL"></div>
    <div><img src="画像URL"></div>
  </div>
</div>

<style>
.main{
  width:350px;
  margin-left:50px;
}
body{
  background-color:#9B9B9B;
}
</style>

1行目から5行目
必要なcssファイル、jsファイルを読み込んでいます。htmlファイルと同一フォルダ内に各ファイルを配置した状態なので、各自の環境に合わせて書き換えてください。fontsフォルダもcssファイルと同一階層に配置するのを忘れないで下さい。忘れると左右の矢印、下側のドットナビが表示されません。

7行目から11行目
カルーセル化したいclass名を実行時に指定しています。このサンプルでは、$(‘.single-item’)の部分がそれに該当します。実行時にはオプションを指定して動き・見た目を指定することが可能ですが、このサンプルはオプション指定は何もしていない状態です。

13行目から20行目
カルーセル表示したい部分のタグ記述です。
<div class=”single-item”>を実行時のクラスで指定しているかと思います。内側のカルーセル表示したい部分1つ1つは<div></div>で囲まれています。このサンプルは画像しか記述していませんが実際に商品を陳列する場合はリンク、商品名、価格などの情報を記述することになるかと思います。

22行目から30行目
表示位置、見た目等の微調整をしてます。背景が白の場合左右の矢印も同色となってしまったので背景に色を付けています。

動作サンプル

指定出来るオプションを一部紹介

実行時に指定出来るオプションも豊富です。
以下に一部を記述(詳細は公式サイトを確認ください。)

nfinite 無限ループの有り無しを設定
arrowsは 矢印の有り無しを設定
accessibility 矢印キーの操作の有無
autoplay 自動実行の有無
autoplaySpeed 自動実行時のスピード
arrows 左右の矢印のナビゲーション有無
dots 下部のドットのナビゲーション有無
draggable ドラッグ操作有無
fade フェード有無
infinite 無限ループ有無
pauseOnHover オートプレイ時のホバーで停止
responsive レスポンシブ設定
slidesToShow 表示するスライド数
slidesToScroll スクロールするスライド数
speed 切り替えスピード設定
swipe スワイプ操作の有無
vertical 縦方向

オプションを指定した記述について

さきほどのサンプルソースにベースにオプション指定をしてみます。

サンプルソース sample2.html


<script>
$("document").ready(function(){
  $('.multiple-items').slick({
    infinite: true,
    dots:true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});	
</script>

<div class="main">
  <div class="multiple-items">
    <div><img src="画像URL"></div>
     ・
     ・
     ・
    <div><img src="画像URL"></div>
  </div>
</div>

<style>
.main{
  width:500px;
  margin-left:50px;
}
body{
  background-color:#9B9B9B;
}
</style>

実行時のスクリプト部分を見てもらうと先ほどとは違ってオプションを色々指定しています。(ナビゲーションの設定、表示数の設定、スライド時の移動する数など)

垂直方向への自動スライドを指定(vertical:true を指定)

自動的にスライドさせるのも簡単

結構需要があると思われる自動的にスライドさせるのも簡単です。

自動実行に関するオプションを指定するだけ
autoplay: true,
autoplaySpeed: 4000,

いかがでしょうか、基本的な部分を抑えるだけでもある程度のことは出来てしまいそうですね。レスポンシブやスワイプにも対応しているのですが、今回は一部しか紹介できていません。また機会があればその他のオプション指定などについても紹介できたらとは思います。それでは、ぜひ活用してみてください。

slick.jsを使った別サンプル
おすすめ!

楽天イベントバナーをスライド表示・掲載期間を設定する方法
楽天などのイベントバナーのショップページへの貼り替えの作業は積極的にイベントに行っている場合は、イベント開始時にバナーを掲載...

slick.jsで左右の画像をチラ見せするスライダーの設定方法について
画像スライダー、カルーセル表示を実装するのにはjQueryのプラグインがよく使われます。プラグインといっても色々な種類がありどれを...

スポンサードリンク
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 ↑