bxsliderを使ったtickerスライダー（デモあり）
2017.6.1
JavaScript, jQuery
bxsliderは仕事でよく使用しているのですが、今回初めてtickerスライダーとして使用したので、おさらいしてみました。
デモ
デモのスライダーを作ってみました。
写真5枚がえんえんとループしています。
インストール
ひとまずbxslider公式からbxslider一式をダウンロードします。
js設定
必要なjsやcssを適当なディレクトリに格納し、リンクをhead内に入れていきます。
|
1 2 3 |
<link type="text/css" rel="stylesheet" href="js/jquery.bxslider.css"> <script src="http://code.jquery.com/jquery-2.2.0.js"></script> <script src="js/jquery.bxslider.min.js"></script> |
tickerスライダーとしての設定は下記の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ var slideSpeed = 5000; var slideLength = $('#Nukoslide div').length; $('#Nukoslide').bxSlider({ ticker: true, slideWidth:300, minSlides: 2, maxSlides: 5, speed: slideSpeed * slideLength, useCSS: false }); }); </script> |
useCSSをfaleseにし、CSSアニメーションの利用をやめます。
これがtrueのままだと、写真が一周したときに一瞬ちらつきができてしまいます。
htmlの記述
|
1 2 3 4 5 6 7 8 |
<section id="Nukoslide"> <div class="slide"><img src="img/nuko01.jpg"></div> <div class="slide"><img src="img/nuko02.jpg"></div> <div class="slide"><img src="img/nuko03.jpg"></div> <div class="slide"><img src="img/nuko04.jpg"></div> <div class="slide"><img src="img/nuko05.jpg"></div> <!-- end*bxsider --> </section> |
「Nukoslide」にはお好きなIDを入れて作成してください。（その場合はスライダーの設定にある#Nukoslideもそれと同じものに）
中の写真はdivで囲ってますが、ulとliなどでもいいですね。
今回は本当に最低限の設定で作成していますが、レスポンシブにしたり、オプションがたくさんあるので色々使ってみるといいんじゃないかなと思います。