このページの本文へ

jQueryプラグインでBootstrapをカスタマイズ (3/3)

2014年11月18日 11時00分更新

文●イシジマミキ/ザ・マーズナレッジ代表

  • この記事をはてなブックマークに追加
本文印刷

3.スライダーに表示するイメージの記述

 スライダーに表示するイメージのコードを記述します。サンプルでは、スライダーをメインビジュアルとアバウトの間に表示するため、<section class="quote">を閉じた直後に追記しました。

 「id="owl-demo"」と「class="item"」はOWL Carousel内にデフォルトで設定されているセレクタです。

■追記後のコード(index.htmlの一部、赤い部分を追記)


<section class="quote">
  <div class="container">
    <blockquote>各分野の専門家が、職業上持っている知識・スキルや経験を活かして社会貢献するボランティア活動全般。<br>また、それに参加する専門家自身。</blockquote>
  </div>
</section>

<section id="owl-demo">
  <div class="item">
    <img src="http://lorempixel.com/287/191/sports" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/287/191/city" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/287/191/food" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/287/191/animals" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/287/191/people" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/287/191/fashion" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/287/191/business" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://lorempixel.com/287/191/transport" alt="Owl Image">
  </div>
</section>

4.index.htmlにスクリプトを記述

 owl.carousel.min.jsをindex.htmlで読み込みます。

・jQueryプラグインを読み込む

 index.htmlのbody要素の一番下にscript要素を追加し、jQueryプラグイン「owl.carousel.min.js」を読む込むコードを読み込みます。

■変更後ソースコード(index.htmlの一部、赤い部分が追記した箇所)


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.smooth-scroll.min.js"></script>
  <script>
         $('a').smoothScroll();
  </script>
  <script src="js/owl.carousel.min.js"></script>
</body>

・OWL Carouselのスクリプト

 続けて、スクリプトを記述します。サンプルでは「#owl-demo」としていますが、スライダーに表示するイメージ部分で設定したセレクタを記述してください。

■スクリプトを追記したソースコード(index.htmlの一部、赤い部分が追記した箇所)


  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.smooth-scroll.min.js"></script>
  <script>
         $('a').smoothScroll();
  </script>
  <script src="js/owl.carousel.min.js"></script>
  <script>
        $(function(){
        $('#owl-demo').owlCarousel();
        });
  </script>
</body>

 OWL Corselを設定したindex.htmlでは、図のように表示されます。簡単ですね!

08.png

OWL Corselで画像が表示された「probono-paprika」

OWL Carouselで表示するイメージ数を変更

 OWL Corselには、たくさんのオプションがあります。その中でも、表示するイメージ数を変更する「items」は簡単に使えて便利です。

 例えば、サンプルで表示したイメージ数5枚を3枚にする場合は、次のように記述します。

■OWL Carouselのscriptタグ(index.htmlの一部、赤い部分を変更、追記)


<script>
      $(function(){
          $('#owl-demo').owlCarousel({
             items : 3,
          });
      });
      </script>

 実行すると図のように、イメージが5枚から3枚に減って表示されます。

09.png

表示される画像数が減った「probono-paprika」

※ ※ ※

 スムーズスクロール、OWL Corselどちらも、とても便利なプラグインなので実際の案件でも、大活躍すること間違いなしです。ただし、OWL CorselはIE9以下では利用できないので、IE9以下のブラウザーを対象に含める場合は別のプラグインを検討しましょう。

前へ 1 2 3 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています