EC サイトの商品画像を効率よく表示するテクニックの1つに「カルーセル(carousel、「回転木馬」とか、日本だと「メリーゴーランド」と表現されることも)」と呼ばれる方法があります。スマホなどの限られた画面サイズの中により多くの画面や画像を含ませる技術で、画面・画像を小さくして詰め込むのではなく、個々の画面は横サイズいっぱいに表示させつつ、(一般的には)横スクロールで画面いっぱいの画像を次々に切り替えて表示するテクニックです。
このカルーセルを実装する方法はいくつもありますが、jQuery と組み合わせて使う slick が有名なようでした。というわけで、使い方を調べてみたので以下メモ代わりに残しておきます:
CSS と JavaScript の指定
まず slick は jQuery が読み込まれている前提で動くので、最初に jQuery を読み込んでおきます。その後、CSS 、テーマ CSS、そして Slick の JavaScript をロードします。全て CDN を使うとこんな感じになります:
カルーセルの中身を作成
次にカルーセルの中身になる部分を、以下のような形で作成します(カルーセル全体となる <div> 要素に myclass という名前を付けて、その中に子 <div> 要素の形で各カルーセル内の要素を配置。子要素は HTML でも画像でも可)。
当たり前ですが、このままだと各要素が縦に5つ並ぶだけの UI になります:
カルーセル化
この部分をカルーセル化します。カルーセル全体の div 要素(上記の myclass クラスを指定している部分)に slick() 関数を実行します。実行時のパラメータでカルーセルの挙動をカスタマイズすることも可能です(以下はその例):
試しにこのブログエントリ内に同じような要素を作ってみるとこんな感じになりました:
簡単ね~
このカルーセルを実装する方法はいくつもありますが、jQuery と組み合わせて使う slick が有名なようでした。というわけで、使い方を調べてみたので以下メモ代わりに残しておきます:
CSS と JavaScript の指定
まず slick は jQuery が読み込まれている前提で動くので、最初に jQuery を読み込んでおきます。その後、CSS 、テーマ CSS、そして Slick の JavaScript をロードします。全て CDN を使うとこんな感じになります:
: <script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/> <link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> :
カルーセルの中身を作成
次にカルーセルの中身になる部分を、以下のような形で作成します(カルーセル全体となる <div> 要素に myclass という名前を付けて、その中に子 <div> 要素の形で各カルーセル内の要素を配置。子要素は HTML でも画像でも可)。
当たり前ですが、このままだと各要素が縦に5つ並ぶだけの UI になります:
: <div class="myclass"> <div>(1番目のカルーセルの中身)</div> <div>(2番目のカルーセルの中身)</div> <div>(3番目のカルーセルの中身)</div> <div>(4番目のカルーセルの中身)</div> <div>(5番目のカルーセルの中身)</div> </div> :
カルーセル化
この部分をカルーセル化します。カルーセル全体の div 要素(上記の myclass クラスを指定している部分)に slick() 関数を実行します。実行時のパラメータでカルーセルの挙動をカスタマイズすることも可能です(以下はその例):
<script> : $(function(){ $('.myclass').slick({ infinite: false, //. 端までスクロールしてもループしない slidesToShow: 3, //. 1度に3つ表示 slidesToScroll: 1, //. スクロールは1つ単位 initialSlide: 0, //. 最初に表示するのは一番最初(上)の要素 arrows: true, //. コントロール用の矢印を表示する dots: true //. 全体の位置がわかるような点コントロールを表示する }) }); : </script>
試しにこのブログエントリ内に同じような要素を作ってみるとこんな感じになりました:
(1番目のカルーセルの中身)
(2番目のカルーセルの中身)
(3番目のカルーセルの中身)
(4番目のカルーセルの中身)
(5番目のカルーセルの中身)
簡単ね~
コメント