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では、図のように表示されます。簡単ですね!
OWL Carouselで表示するイメージ数を変更
OWL Corselには、たくさんのオプションがあります。その中でも、表示するイメージ数を変更する「items」は簡単に使えて便利です。
例えば、サンプルで表示したイメージ数5枚を3枚にする場合は、次のように記述します。
■OWL Carouselのscriptタグ(index.htmlの一部、赤い部分を変更、追記)
<script>
$(function(){
$('#owl-demo').owlCarousel({
items : 3,
});
});
</script>
実行すると図のように、イメージが5枚から3枚に減って表示されます。
※ ※ ※
スムーズスクロール、OWL Corselどちらも、とても便利なプラグインなので実際の案件でも、大活躍すること間違いなしです。ただし、OWL CorselはIE9以下では利用できないので、IE9以下のブラウザーを対象に含める場合は別のプラグインを検討しましょう。