当サイトには広告が含まれております

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

この記事は最終更新日から10年経過しています。内容が古い可能性があります。

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で使ってみます。

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

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントを残す

記事をざっと見る