スマホ対応のレスポンシブ カルーセルスライダー5選

ご紹介!レスポンシブ対応のカルーセル。

カルーセルスライダー

最近、レスポンシブデザインのサイトに様々なjQueryプラグインを設置する案件が増えています。

そんなタスクの中で使った、あるいは見てきたもののうち、今日はカルーセルパネルのオススメ5選を紹介します。

1. FlexSlider2

FlexSlider2

オーソドックスなスライダー、サムネイルタイプのスライダー、そしてカルーセルパネルがセットになったjQueryプラグイン。

以前、仕事でも使いました。

【DEMO&Download】
http://flexslider.woothemes.com/basic-carousel.html »

2. slick

slick

色々なオプションが付いている軽量タイプのカルーセルパネル用jQueryプラグイン。

オプションCenterModeあたりが、ナカナカ面白いと思います。

こちらも、仕事で使用しました。

【DEMO&Download】
http://kenwheeler.github.io/slick/ »

3. OWL Carousel

OWL Carousel

軽量なカルーセルパネル用jQueryプラグイン。

スマホ/タブレット/PCでのアイテム表示数の設定がしやすいのが特徴です。

【DEMO&Download】
http://owlgraphic.com/owlcarousel/#demo »

4. Amazing Carousel

Amazing Carousel

様々なデザインが揃っているカルーセルパネル用jQueryプラグイン。

サイドバーにピッタリなverticalタイプもあります。

【DEMO&Download】
http://amazingcarousel.com/examples/jquery-carousel-with-images-and-youtube-videos-id2/ »

5. All in one jQuery Banner

All in one jQuery Banner

立体的に配置した画像をスライドさせるカルーセルパネル用jQueryプラグイン。

立体配置のカルーセルで、レスポンシブ対応のものは珍しいかと思います。

リサイズ時の動きがかっこいいですが、有料のプラグインです。

こちらも、仕事で使用しました。

【DEMO】
http://www.responsivejqueryslider.com/charmingResponsive.html »

【BUY】
http://codecanyon.net/item/jquery-banner-rotator-content-slider-carousel/1534434 »

まとめ

設置やカスタマイズのしやすでいうと、FlexSlider2やslickあたりがオススメですし、日本のサイトにも情報が沢山あります。

一方、All in one jQuery Bannerはさすが有料だけあって、かっこいいし様々な設定が可能です。
しかし、日本語での情報が少ないこともあり、どちらかというと中級者〜向けのプラグインになります。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply