タッチ、スワイプ、マウスホイール、レスポンシブ対応のスライダーが実装できるjQueryプラグインOwl Carousel 2をご紹介します。
Contents
ディスプレイ広告
タッチ、スワイプ、マウスホイール、レスポンシブ対応のスライダーが実装できる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>
複数コンテンツをセンター寄せでスライドさせるOwl Carousel 2デモページ
複数コンテンツをセンター寄せでスライドさせるOwl Carousel 2デモ
ソース元：Owl Carousel 2
Owl Carousel 2
Demos | Owl Carousel
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告
ディスプレイ広告
