2014.05.24
OWL Carousel – Amazonのおすすめ商品的なカルーセルがサクッと作れるJQueryプラグイン


そもそもカルーセルって何?
で、タイトルにも書いてあるAmazonのおすすめ商品的なカルーセルとは何なのか。それはとりあえずAmazonのおすすめ商品の表示を見てみるとよく分かります。 Amazonのおすすめ商品はこんな表示になっていますね。
Webデザインの一種で、画像などのコンテンツをスムーズに横にスライドさせる表示方法のことである。という事でした。
そんなカルーセルをサクッと作るならJQueryプラグイン「OWL Carousel」

1.サンプルのカルーセルから自分のイメージに合うデザインを決定する
まずは公式デモページを開いて、自分のイメージしているカルーセルパネルデザインを探しましょう。 表示するアイテムの数なんかは後々で変更できますので、ご安心ください。2.OWL Carouselダウンロード
適用するデザインが決まったら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、スクリプトのサンプルは先程の各デモページの中段辺りにそれぞれ用意されていますので、そこから拝借しましょう。