2014.05.24
OWL Carousel – Amazonのおすすめ商品的なカルーセルがサクッと作れるJQueryプラグイン
カルーセルと聞いたら「ん？まき・・・」としか脳みそが働きませんでした。どうもOsamuです。
とあるショッピングサイトを作成している時にレコメンド機能を実装する事になりました。そもそも私は恥ずかしながらレコメンド機能という言葉を知らなかったのですが、レコメンド機能とはおすすめ商品の事です。
そしてレコメンド機能を実装する時にどんな表示にするか！と考えましたが、私もいつも使っていますショッピングサイト最大手のAmazonのレコメンド表示を参考にしました。、そうです、はい、Amazonのレコメンド表示といえば、そうですカルーセル表示です。
そもそもカルーセルって何？
で、タイトルにも書いてあるAmazonのおすすめ商品的なカルーセルとは何なのか。それはとりあえずAmazonのおすすめ商品の表示を見てみるとよく分かります。 Amazonのおすすめ商品はこんな表示になっていますね。
この表示では1ページ5商品のおすすめ商品が8ページ分、合計40商品のおすすめ商品が左右の矢印でページを切り替えていく事で見れるわけです。カルーセルとは、正式名称カルーセルパネル、概要は
Webデザインの一種で、画像などのコンテンツをスムーズに横にスライドさせる表示方法のことである。という事でした。
そんなカルーセルをサクッと作るならJQueryプラグイン「OWL Carousel」
photo credit: Johannes_wl via photopin cc
そしてそんなAmazon的なカルーセルパネルをサクッと作る事ができるのが、JQueryプラグインのOWL Carouselです。
JQueryプラグイン「OWL Carousel」公式：http://owlgraphic.com/owlcarousel/
以下に簡単な使い方の説明をします。
1.サンプルのカルーセルから自分のイメージに合うデザインを決定する
まずは公式デモページを開いて、自分のイメージしているカルーセルパネルデザインを探しましょう。 表示するアイテムの数なんかは後々で変更できますので、ご安心ください。2.OWL Carouselダウンロード
適用するデザインが決まったらOWL Carouselをダウンロードしましょう。 トップページにデデンとダウンロードボタンがあります。そこからダウンロード！！
ダウンロードしたZipファイルを解凍します。ファイル構成は以下の通りですね。
何やらごちゃごちゃたくさんファイルがありますが、実際に使うのはフォルダ「owl-carousel」の中身だけです。
3.jQueryとCSS設置
では実際に表示したいページにjQueryとCSSを設置を設定していきましょう。設置するのは先程のフォルダの中にある「owl.carousel.css」「owl.carousel.min.js」「owl.theme.css」です。<!-- jquery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="owl-carousel/owl.carousel.js"></script> <!-- CSS --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="owl-carousel/owl.theme.css">
4.HTML、スクリプト記述
続いてHTMLとスクリプトを記述します。HTML、スクリプトのサンプルは先程の各デモページの中段辺りにそれぞれ用意されていますので、そこから拝借しましょう。
