Owl Carousel 2はタッチ、スワイプ、マウスホイール、レスポンシブ対応のスライダーが実装できるプラグインをご紹介します。
Contents
読込CSS、jsファイル
<!-- Stylesheets --> <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="./assets/css/docs.theme.min.css"> <!-- Owl Stylesheets --> <link rel="stylesheet" href="./assets/owlcarousel/assets/owl.carousel.min.css"> <link rel="stylesheet" href="./assets/owlcarousel/assets/owl.theme.default.min.css"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <!-- javascript --> <script src="./assets/vendors/jquery.min.js"></script> <script src="./assets/owlcarousel/owl.carousel.js"></script>
複数コンテンツをセンター寄せでスライドさせるHTMLの記述
※今回複数コンテンツをセンター寄せでスライドさせる記述ですが、多数オプションがあるので以下「Owl Carousel 2(ソース元)」でご確認下さい。
<h1 style="text-align: center;">複数コンテンツをセンター寄せでスライドさせます。</h1> <section id="demos"> <div class="row"> <div class="large-12 columns"> <h4 id="center-with-loop">Center with loop</h4> <div class="loop owl-carousel owl-theme"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div> <br> <h4 id="center-without-loop">Center without loop</h4> <div class="nonloop owl-carousel"> <div class="item"> <h4>1</h4> </div> <div class="item"> <h4>2</h4> </div> <div class="item"> <h4>3</h4> </div> <div class="item"> <h4>4</h4> </div> <div class="item"> <h4>5</h4> </div> <div class="item"> <h4>6</h4> </div> <div class="item"> <h4>7</h4> </div> <div class="item"> <h4>8</h4> </div> <div class="item"> <h4>9</h4> </div> <div class="item"> <h4>10</h4> </div> <div class="item"> <h4>11</h4> </div> <div class="item"> <h4>12</h4> </div> </div> </div> </div> </section>
読込JsファイルとJavaScriptの記述
※多数オプションがあるので「Demos | Owl Carousel」を参照ください。
<!-- vendors --> <script src="./assets/vendors/highlight.js"></script> <script src="./assets/js/app.js"></script> <script> jQuery(document).ready(function($) { $('.loop').owlCarousel({ center: true, items: 2, loop: true, margin: 10, responsive: { 600: { items: 4 } } }); $('.nonloop').owlCarousel({ center: true, items: 2, loop: false, margin: 10, responsive: { 600: { items: 4 } } }); }); </script>
複数コンテンツをセンター寄せでスライドさせるOwl Carousel 2デモ
複数コンテンツをセンター寄せでスライドさせるOwl Carousel 2デモ
Owl Carousel 2(ソース元)
※流用される場合は自己責任でお願いします。
デモページ