bxSlider

bxSlider

  • スライドショーを手軽にWebページ内に設置できるスライドライブラリ
  • ulでもdivでもスライダーが使える
  • スライド動作も3種類選べる
  • カルーセルタイプにすることも可能


http://bxslider.com



読み込んで利用
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
スライド画像の設定
  • スライド画像は、リストで追加する
<style>
html, body, ul, li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
#billboard {
  width: 920px;
  margin: 50px auto;
}
</style>
</head>
<body>
<div id="billboard">
<ul id="bxslider">
  <li><img src="img/01.jpg" alt="" title=""></li>
  <li><img src="img/02.jpg" alt="" title=""></li>
  <li><img src="img/03.jpg" alt="" title=""></li>
  <li><img src="img/04.jpg" alt="" title=""></li>
  <li><img src="img/05.jpg" alt="" title=""></li>
</ul>
</div>
</body>
スライドの動作設定
  • 初期設定
<script>
$(function(){
  $('#bxslider').bxSlider({
  });
});
</script>


このとき、「jquery.bxslider.css」の画像のパスを書き換える必要があります。

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
  left: 10px;
  background: url(../img/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
  right: 10px;
  background: url(../img/controls.png) no-repeat -43px -32px;
}
カスタマイズ
<script>
$(function(){
  $('#bxslider').bxSlider({
    mode: 'horizontal',  //'horizontal', 'vertical', 'fade'
    speed: 1000,  //１秒掛けてアニメーション移動（2000=2秒）
    startSlide: 0,  //最初のスライドを設定：0からカウントします
    auto: true,  //自動再生［true=ON、false=OFF］
    autoControls: true,  //自動再生のコントローラを表示［true=ON、false=OFF］
    adaptiveHeight: true,  //高さが大きい場合に自動でフィットします
    captions: false  //true=imgタグのtitle属性を表示［true=表示、false=非表示］
  });
});
</script>

カールーセル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSliderでカールセル</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- bxSlider（1列のスライダー）のための記述 -->
<script>
$(function(){
  $('#bxslider').bxSlider({
    infiniteLoop: false, //最後の画像でストップするよう設定。ループさせる場合はこの行は削除してOK。
    minSlides: 4, //横に並ぶスライドの数
    maxSlides:4, //横に並ぶスライドの数
    slideWidth: 100,//サムネイル画像の幅
    slideMargin: 10 //サムネイルの画像と画像の余白
  });
});
</script>
</head>
<body>
<div id="container">
<h1>bxSliderでカルーセル</h1>
<h2>横1列のみで使う場合</h2>
<div class="wrapper">
  <ul id="bxslider">
    <li><a href="ph/01.jpg"><img src="ph/thumb_01.jpg" alt=""></a></li>
    <li><a href="ph/02.jpg"><img src="ph/thumb_02.jpg" alt=""></a></li>
    <li><a href="ph/03.jpg"><img src="ph/thumb_03.jpg" alt=""></a></li>
    <li><a href="ph/04.jpg"><img src="ph/thumb_04.jpg" alt=""></a></li>
    <li><a href="ph/05.jpg"><img src="ph/thumb_05.jpg" alt=""></a></li>
    <li><a href="ph/06.jpg"><img src="ph/thumb_06.jpg" alt=""></a></li>
    <li><a href="ph/07.jpg"><img src="ph/thumb_07.jpg" alt=""></a></li>
    <li><a href="ph/08.jpg"><img src="ph/thumb_08.jpg" alt=""></a></li>
    <li><a href="ph/09.jpg"><img src="ph/thumb_09.jpg" alt=""></a></li>
    <li><a href="ph/10.jpg"><img src="ph/thumb_10.jpg" alt=""></a></li>
  </ul>
</div><!-- /.wrapper -->
</div><!-- /#container -->
</body>
</html>