レスポンシブデザインが多くなってきている昨今にぴったりなカルーセルスライダーを紹介させて頂きます。

「Owl Carousel」というプラグインですが、
こちらのプラグインなにがぴったりなのかというと、
レスポンシブ対応なのはもちろんで、
タッチにも対応しており、
なんといっても一番いいのが、
オプションで、PC、ダブレット、スマホに合わせて、
アイテムの表示する数を変更出来るという点です。

他のプラグインでは、それようのオプションはなく、
自分でスクリプト書かなければいけませんでした。

幅の調整もできるので、自由度もあります。

デモがありますので、そちらをご覧下さい。

DEMO

設定の仕方

まずは、head内に以下のファイルを読み込みます。

XHTML

<link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/owl.theme.css"> <script type="text/javascript" src="js/jquery.min.js"></script><!-- jQuery 1.7以上 --> <script type="text/javascript" src="js/owl.carousel.js"></script>

1 2 3 4

<link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/owl.theme.css"> <script type="text/javascript" src="js/jquery.min.js"></script><!--  jQuery 1.7以上  --> <script type="text/javascript" src="js/owl.carousel.js"></script>

そしてHTMLは、

XHTML

<ul id="slider1"> <li><img src="sample.png" /></li> <li><img src="sample.png" /></li> <li><img src="sample.png" /></li> <li><img src="sample.png" /></li> </ul>

1 2 3 4 5 6

<ul id="slider1">     <li><img src="sample.png" /></li>     <li><img src="sample.png" /></li>     <li><img src="sample.png" /></li>     <li><img src="sample.png" /></li>     </ul>

最後、プラグインの設定は以下になります。

JavaScript

$(document).ready(function() { $("#slider1").owlCarousel(); });

1 2 3 4 5

$(document).ready(function() {     $("#slider1").owlCarousel();   });

以上で完了です！！

ちなみに、端末毎で変えるには以下のように設定します。

JavaScript

$(document).ready(function(){ $('#slider1').owlCarousel({ items : 8, //ブラウザの幅が1199px 以上の時 8 itemsDesktop : [1199,6], // 1199px から 600px　まで 6つ itemsDesktopSmall : false, // betweem 900px and 601px itemsTablet: [600,4], //600px から 479px　まで　4つ itemsMobile : [479,3] // 479px　以下は 3つ }); });

1 2 3 4 5 6 7 8 9 10

$(document).ready(function(){     $('#slider1').owlCarousel({         items : 8, //ブラウザの幅が1199px 以上の時 8         itemsDesktop : [1199,6], // 1199px から 600px　まで 6つ         itemsDesktopSmall : false, // betweem 900px and 601px         itemsTablet: [600,4], //600px から 479px　まで　4つ         itemsMobile : [479,3] // 479px　以下は 3つ     });     });

オプションで様々な設定も出来ます！

オプションは以下になります。

JavaScript

items : 5,//並べる個数 itemsCustom : false, //カスタム機能 itemsDesktop : [1199,4],//デスクトップ大 itemsDesktopSmall : [980,3],//デスクトップ小 itemsTablet: [768,2],//タブレット大 itemsTabletSmall: false,//タブレット小 itemsMobile : [479,1],//スマホ singleItem : false,//アイテムをひとつにする itemsScaleUp : false,//アイテムを自動的に大きくする //Basic Speeds slideSpeed : 200,//スライドのスピード paginationSpeed : 800, //ページネーションの際のスピード rewindSpeed : 1000, //アイテムが最初に戻る時のスピード //Autoplay autoPlay : false, //自動プレイ stopOnHover : false,//ホバーでストップさせるか否か // Navigation navigation : false, //ナビゲーションの有無 navigationText : ["prev","next"], //ナビゲーションのテキスト rewindNav : true, //最初に戻るの機能の有無 scrollPerPage : false, //falseでスライドの動きを一個ずつ //Pagination pagination : true, //ページネーション paginationNumbers: false, //ページネーションにナンバー付与 // Responsive responsive: true, //レスポンシブ responsiveRefreshRate : 200, //ブラウザの幅が変化した際切り替わるスピード responsiveBaseWidth: window, //幅の基点の設定(デフォルトはウィンドウ幅) // CSS Styles baseClass : "owl-carousel", //classの名前の設定 theme : "owl-theme", //テーマの設定 //Lazy load lazyLoad : false, // lazyFollow : true, // lazyEffect : "fade", // //Auto height autoHeight : false, //高さを自動で設定 //JSON jsonPath : false, jsonSuccess : false, //Mouse Events dragBeforeAnimFinish : true, mouseDrag : true, touchDrag : true, //Transitions transitionStyle : false, // Other addClassActive : false, //Callbacks beforeUpdate : false, afterUpdate : false, beforeInit: false, afterInit: false, beforeMove: false, afterMove: false, afterAction: false, startDragging : false, afterLazyLoad : false

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

items : 5,//並べる個数     itemsCustom : false, //カスタム機能     itemsDesktop : [1199,4],//デスクトップ大     itemsDesktopSmall : [980,3],//デスクトップ小     itemsTablet: [768,2],//タブレット大     itemsTabletSmall: false,//タブレット小     itemsMobile : [479,1],//スマホ     singleItem : false,//アイテムをひとつにする     itemsScaleUp : false,//アイテムを自動的に大きくする       //Basic Speeds     slideSpeed : 200,//スライドのスピード     paginationSpeed : 800, //ページネーションの際のスピード     rewindSpeed : 1000, //アイテムが最初に戻る時のスピード       //Autoplay     autoPlay : false, //自動プレイ     stopOnHover : false,//ホバーでストップさせるか否か       // Navigation     navigation : false, //ナビゲーションの有無     navigationText : ["prev","next"], //ナビゲーションのテキスト     rewindNav : true, //最初に戻るの機能の有無     scrollPerPage : false, //falseでスライドの動きを一個ずつ       //Pagination     pagination : true, //ページネーション     paginationNumbers: false, //ページネーションにナンバー付与       // Responsive     responsive: true, //レスポンシブ     responsiveRefreshRate : 200, //ブラウザの幅が変化した際切り替わるスピード     responsiveBaseWidth: window, //幅の基点の設定(デフォルトはウィンドウ幅)       // CSS Styles     baseClass : "owl-carousel", //classの名前の設定     theme : "owl-theme", //テーマの設定       //Lazy load     lazyLoad : false, //     lazyFollow : true, //     lazyEffect : "fade", //       //Auto height     autoHeight : false, //高さを自動で設定       //JSON     jsonPath : false,     jsonSuccess : false,       //Mouse Events     dragBeforeAnimFinish : true,     mouseDrag : true,     touchDrag : true,       //Transitions     transitionStyle : false,       // Other     addClassActive : false,       //Callbacks     beforeUpdate : false,     afterUpdate : false,     beforeInit: false,     afterInit: false,     beforeMove: false,     afterMove: false,     afterAction: false,     startDragging : false,     afterLazyLoad : false

Owl Carousel