- JavaScript
- 2017-09-26
スライドショーを実装してくれる「bxSlider」をご紹介します。
これまでにもスライドショーを実装できる色々なプラグインをご紹介しましたが、
最近はこれをよく使います。
まずはjQueryを読み込む。
<script src="./jquery-1.9.1.min.js"></script>
※ちなみに、jQueryが3.1.1だとエラーが発生しました。
続いてbxSliderのファイルを読み込みます。
<link href="./bxslider/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="./bxslider/jquery.bxslider.min.js"></script>
スライドさせたい内容を用意します。
<ul class="bxslider"> <li> <img src="./images/exam_picture1.jpg"> </li> <li> <img src="./images/exam_picture2.jpg"> </li> <li> <img src="./images/exam_picture3.jpg"> </li> </ul>
まずは簡単に実装してみましょう。
<script type="text/javascript"> <!--// (function($) { $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoHover: true, }); }); })(jQuery); //--> </script>
4,673 views