カルーセルができるJQueryプラグイン OWL Carousel は簡単便利!

Image
Amazonなどで見かける「この商品を買った人はこんな商品も買っています」という、画像があって左右に移動できるもの…そういう動きのものをカルーセルというらしいのですが、これを作る導入簡単なJQueryプラグインがあったので使ってみました。通常のhtmlでもWordPressでもXOOPS Cubeでもおおよそどこでも使えますよ(^_^)v

Amazonのカルーセルってこんな感じです

Image

カルーセルっていうのは回転木馬って意味のようで、回転木馬のように商品をぐるぐると回して見ることができる仕組みのことを言うみたいです。
*私たち年代だとつい…麻紀と思い浮かんじゃいますが

見ている商品に関連して、おすすめ商品が横に並び、左右のボタンで商品の切り替えができます。

OWL Carousel のダウンロードと設置

Image

http://www.owlgraphic.com/owlcarousel/

Download for FREE というボタンをクリックすると、owl.carousel.zip というファイルがダウンロード出来るので解凍します。

中はこのようになっています。

Image

使うのは owl-carousel というフォルダです。

普通のhtmlで使ってみる

JQueryプラグインはWordPressのプラグインということではないので、通常のどのサイトでも使うことができます。まずは普通のhtmlで使ってみます。

こんな感じになりました。

このblogにアップしている写真をいくつも並べて見ていく感じにします。このようにブラウザの幅に応じて表示件数が増えたり減ったりします。ドラッグでページを動かすこともできるのでiPhoneなどのスマートフォンの対応も自動的に行えます。

owl-carousel というフォルダを置いたところに、index.htmlを作ります。中をこのように書きます。
<div id=”owl-example” class=”owl-carousel”>と</div>で囲まれた中に複数の表示したい画像などを入れておきます。

WordPressのテーマに入れて使ってみる

同じ事をWordPressでやってみました。

OWLテスト(別窓にリンク)

owl-carousel フォルダを使っている子テーマに置きます。
固定ページもしくは投稿ページにこのように書きます。

自分のサイトで試したいときは、

http://localhost/ryuswp/wp-content/themes/twentyfourteen-ryus/

を、試してみたい環境の

サイトurl/wp-content/themes/テーマ名/ に置き換えて試してみてください。

XOOPS Cubeでも同じように使えます

XOOPS Cubeでの例

XOOPS Cubeでも使っているテーマフォルダにowl-carousel フォルダを置いて使うことが出来ます。
例えば pico に このように書くと、

実際に試してみるときは、
http://localhost/xc222/html/themes/legacy_default/
を、試してみたい環境の
サイトurl/themes/テーマ名/ に置き換えて試してみてください。

前に戻る、次に進むなど…他色々オプションで変えられます

amazonと全く同じように画像をクリックして前に戻る、次に進むなどもオプション設定で出来ますし他にも色々出来るのですが説明が長くなりますのでまた別の機会にblogに書いてみたいと思います♪

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る