タッチ、スワイプ、マウスホイール、レスポンシブに対応したスライダーOwl Carousel 2【jQueryプラグイン】｜DAD UNION

タッチ、スワイプ、マウスホイール、レスポンシブ対応のスライダーが実装できるjQueryプラグインOwl Carousel 2をご紹介します。

Contents

タッチ、スワイプ、マウスホイール、レスポンシブ対応のスライダーが実装できるjQueryプラグインOwl Carousel 2の読込CSS、jsファイル
複数コンテンツをセンター寄せでスライドさせるHTMLの記述
タッチ、スワイプ、マウスホイール、レスポンシブに対応したスライダーOwl Carousel 2のJavaScript記述
複数コンテンツをセンター寄せでスライドさせるOwl Carousel 2デモページ
- ソース元：Owl Carousel 2

タッチ、スワイプ、マウスホイール、レスポンシブ対応のスライダーが実装できるjQueryプラグインOwl Carousel 2の読込CSS、jsファイル

※google fonts（Lato:300,400,700,400italic,300italic）とCSSファイルのdocs.theme.min.css、owl.carousel.min.css、owl.theme.default.min.cssを読み込みます。その他jsファイルのhtml5shiv.js、respond.min.js、jquery.min.js、owl.carousel.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>

タッチ、スワイプ、マウスホイール、レスポンシブに対応したスライダーOwl Carousel 2のJavaScript記述

※highlight.js、app.jsファイルを読み込みます。$(‘スライダーエリア’).owlCarousel({オプション})を記述します。オプションは「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>