レスポンシブデザインが多くなってきている昨今にぴったりなカルーセルスライダーを紹介させて頂きます。
「Owl Carousel」というプラグインですが、
こちらのプラグインなにがぴったりなのかというと、
レスポンシブ対応なのはもちろんで、
タッチにも対応しており、
なんといっても一番いいのが、
オプションで、PC、ダブレット、スマホに合わせて、
アイテムの表示する数を変更出来るという点です。
他のプラグインでは、それようのオプションはなく、
自分でスクリプト書かなければいけませんでした。
幅の調整もできるので、自由度もあります。
デモがありますので、そちらをご覧下さい。
設定の仕方
まずは、head内に以下のファイルを読み込みます。
|
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は、
|
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> |
最後、プラグインの設定は以下になります。
|
1 2 3 4 5 | $(document).ready(function() { $("#slider1").owlCarousel(); }); |
以上で完了です！！
ちなみに、端末毎で変えるには以下のように設定します。
|
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つ }); }); |
オプションで様々な設定も出来ます！
オプションは以下になります。
|
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 |
