ページャーやコントローラー、ループ、スマホ対応 等に対応した汎用的なスライダーjquery.bxslider.jsを使って複数画像スライダーを表示する方法をご紹介します。
スライダー系って色々種類あって各々オプションを覚えるのに時間掛かります。
Contents
ディスプレイ広告
jquery.bxslider.jsを使って複数画像スライダーを表示するCSS記述
※jquery.bxslider.cssファイルを読み込みます。スライドエリア(.wrap)のCSS記述です。必要に応じて変更して下さい。
<link href="jquery.bxslider.css" rel="stylesheet" /> <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; width:100%; margin:0px; padding:0px; } h1{ text-align: center; font-size: 20px; line-height: 2em; padding: 30px 0 0 0; } .wrap{ width: 600px; margin: 0 auto } </style>
jquery.bxslider.jsを使って複数画像スライダーを表示するHTML記述
※横一列の複数画像スライダーエリア(class=”bxslider”)にスライド画像(1 ~ 8.jpg)を用意しました。
<h1>jquery.bxslider.jsを使った複数画像スライダーを表示</h1> <div class="wrap"> <ul class="bxslider"> <li> <img src="1.jpg" /> </li> <li> <img src="2.jpg" /> </li> <li> <img src="3.jpg" /> </li> <li> <img src="4.jpg" /> </li> <li> <img src="5.jpg" /> </li> <li> <img src="6.jpg" /> </li> <li> <img src="7.jpg" /> </li> <li> <img src="8.jpg" /> </li> </ul> </div>
jquery.bxslider.jsを使って複数画像スライダーを表示するJavaScriptの記述
※jquery-3.1.1.min.js、jquery.bxslider.jsファイルを読み込みます。$(‘スライダーエリア’).bxSlider({オプション})を記述します。スライドの移動数、余白、幅、スピード無限、自動スライド等を設定可能です。
<script src="jquery-3.1.1.min.js"></script> <script src="jquery.bxslider.js"></script> <script> $(document).ready(function(){ $('.bxslider').bxSlider({ mode: 'horizontal', moveSlides: 1, slideMargin: 40, infiniteLoop: true, slideWidth: 660, minSlides: 3, maxSlides: 3, speed: 800, auto: true }); }); </script>
汎用的スライダーjquery.bxslider.jsを使った複数画像スライダーを表示するデモページ
汎用的スライダーjquery.bxslider.jsを使った複数画像スライダーを表示するデモページ
ソース元:bxslider-4
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。