【実用的！】レスポンシブWebデザインに対応したカルーセルjsをjQueryプラグイン化してみた
Web2017年6月28日
先日、レスポンシブWebデザインに対応したカルーセルjsをご紹介させていただきましたが、今回さらに改良して「jquery.carouselRWD.js」としてjQueryプラグイン化してみました。オプションで設定できる機能は絞り、案件でサクッと使いまわすことを考慮して実装したのでわりと実用的に仕上がったと思います。本記事ではこの「jquery.carouselRWD.js」の使い方についてご紹介させていただきたいと思います。
jquery.carouselRWD.jsのダウンロード
未圧縮版と圧縮版の両方をご用意しました。お好きな方をお使いください。MITライセンスです。
jquery.carouselRWD.jsでできること
ある程度実案件に応用できるよう、以前作成した機能をベースに以下の4つのオプションを設定できるようにプラグイン化しました。
- アニメーションのスピード
- 自動スライドの間隔
- ループの有り／無し
- インジケーターの有り無し
あわせて、複数のカルーセルを同一ページに表示することも可能にしています。
アニメーションのスピード
初期値は500です。お好みでアニメーションのスピードを設定できます。
$(function() {
$("セレクタ").carouselRWD({
$speed:300
});
});自動スライドの間隔
初期値は3000（3秒毎）で自動スライドします。以下の様に5000と設定すれば5秒毎に自動スライドするようになります。
$(function() {
$("セレクタ").carouselRWD({
$interval:5000
});
});ループの有り／無し
$loopFlagの値に「false」を設定することでループしなくなり、最初のアイテムがアクティブになっていれば「前」ボタンが非表示、最後のアイテムがアクティブになっていれば「次」ボタンが非表示となります。
また、ループ無しで自動スライドするというケースは経験上基本的にないと思われるので、自動スライドもオフになるようにしました。
$(function() {
$("セレクタ").carouselRWD({
$loopFlag:false
});
});インジケーターの有り無し
デザイン上、インジケーター表示が不要な場合もあると思います。その場合は$indicatorFlagの値をfalseとすることでインジケーターが表示されなくなります。
$(function() {
$("セレクタ").carouselRWD({
$indicatorFlag:false
});
});cssはプラグイン化前と変わっているので注意
今回プラグイン化するにあたって、以前のプラグイン化前のものから、セレクタの命名含め若干cssを変更しています。以下のcssおよびhtmlと合わせてお使いください。
css
.carousel{
position:relative;
max-width:960px;
margin:0 auto;
font-size:0;
line-height:0;
}
.carousel .carousel-view {
overflow:hidden;
position:relative;
}
.carousel .carousel-view .carousel-contents{
position:relative;
top:0;
}
.carousel .carousel-view .carousel-contents:after{
clear:both;
content:"";
display:table;
}
.carousel .carousel-view .carousel-contents .item {
float:left;
display:inline;
}
.carousel .carousel-view p.prev{
position:absolute;
top:50%;
left:0;
transform: translateY(-50%);
}
.carousel .carousel-view p.next{
position:absolute;
top:50%;
right:0;
transform: translateY(-50%);
}
.carousel ul.list-indicator{
text-align:center;
margin-bottom:50px;
}
.carousel ul.list-indicator li{
display:inline-block;
margin-right:20px;
margin-top:20px;
}
.carousel ul.list-indicator li a{
display:block;
height:20px;
width:50px;
background:#ccc;
}
.carousel ul.list-indicator li.current a{
background:#ff0000;
}html
ここでは、class="js-carousel-01"に適用する想定のソースとしています。
<div class="js-carousel-01">
<div class="carousel">
<div class="carousel-view">
<div class="carousel-contents">
<div class="item"><a href="https://yahoo.co.jp/" target="_blank"><img src="http://placehold.jp/333333/ffffff/960x450.png?text=1" alt=""></a></div>
<div class="item"><a href="https://yahoo.co.jp/" target="_blank"><img src="http://placehold.jp/333333/ffffff/960x450.png?text=2" alt=""></a></div>
<div class="item"><a href="https://yahoo.co.jp/" target="_blank"><img src="http://placehold.jp/333333/ffffff/960x450.png?text=3" alt=""></a></div>
</div>
<p class="prev"><a href="#"><img src="https://placehold.jp/80x80.png?text=前" alt="前"></a></p>
<p class="next"><a href="#"><img src="https://placehold.jp/80x80.png?text=次" alt="次"></a></p>
</div>
<ul class="list-indicator">
</ul>
</div>
</div>デモ
実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。
まとめ
jsで作った機能をプラグイン化してみたのは初めての試みでした。ですがわりと上手くいったと思われるので、今回公開に踏み切りました次第です。プラグイン化するとjsの理解もより深まりますし、何より機能を柔軟に使いまわせるようになるので、設計上とてもスッキリします。
もしこのプラグインに不具合があれば改良してよりよいものにしていきたいと思いますので、ぜひお使いになってみて何かあればコメントいただけると、とてもありがたいです。今後ともjquery.carouselRWD.jsをどうぞよろしくお願いいたします。
追記（2017年7月5日）
プラグイン化ではなく、jsonファイルのデータ読み込みに対応したものも作ってみました。どうぞあわせてお読みください。
追記（2017年7月14日）
jsonデータを扱うバージョンを、さらにクロスドメイン対応しました。どうぞあわせてお読みください。