ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Amazonの商品詳細ページなどで使われている、関連商品のスライダー。格好が良く、ついつい色々見てしまい、あげくに購入してしまった、なんて経験がある人もいるのではないだろうか。

ピクチャ 2-71

通常、縦スクロールを使って動くのが当たり前のWebページにおいて、横の動きが与えるインパクトは大きい。そこで試してみたいライブラリがこれだ。

今回紹介するオープンソース・ソフトウェアはjCarousel、JavaScriptベースのスライダーライブラリだ。

jCarouselは画像を横に並べて左右のスライダで画像を切り替えることができる。まさにAmazonで提供されているあのスライダを実現できるライブラリだ。様々なオプションが存在し、自分の使い勝手に合わせた利用法ができる。

ピクチャ 3-70

例えばサークルを選ぶと左右がつながってループする。戻るアクションの場合は、端までいきつくと逆の端まで一気に動く。他にも左右のスライダではなくページネーションのように番号がついたタイプや、動くときにスピード感があるアクションを利用することもできる。

ピクチャ 4-62

縦型も選ぶことができるので、サイドバーなどにはちょうど良いかも知れない。ECサイトはもちろん、写真のスライドショーとしても利用できる便利なライブラリだ。

jCarousel - Riding carousels with jQuery

 http://sorgalla.com/projects/jcarousel/

 

MOONGIFTの関連記事

  • DevRel
  • Com2