jQueryプラグインのbxSliderを試してみる

JavaScript

jQueryプラグインのbxSliderを試してみる。

jQuery Content Slider | Responsive jQuery Slider | bxSlider
http://bxslider.com/

設置

ファイルを下記のような感じで設置。

├ HTMLファイル
├ images
│ ├── bx_loader.gif
│ ├── controls.png
│ ├── 001.png
│ ├── 002.png
│ └── ・・・
├ jquery.bxslider.css
└ jquery.bxslider.min.js

基本

基本的には下記のような感じでHTMLを書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet">
<script src="jquery.bxslider.min.js"></script>
<script>
  $(function(){
    $('.bxslider').bxSlider({
      slideWidth: 800
    });
  });
</script>
<style>
/* ulのマージンを0にしとかないと、なぜか変な余白ができてしまう */
ul {
  margin: 0;
}
</style>
</head>
<body>
<ul class="bxslider">
  <li><img src="images/001.png" /></li>
  <li><img src="images/002.png" /></li>
  <li><img src="images/003.png" /></li>
  <li><img src="images/004.png" /></li>
  <li><img src="images/005.png" /></li>
  <li><img src="images/006.png" /></li>
  <li><img src="images/007.png" /></li>
  <li><img src="images/008.png" /></li>
  <li><img src="images/009.png" /></li>
  <li><img src="images/010.png" /></li>
</ul>
</body>
</html>

デモ

カルーセル

slideの数を指定するとカルーセルな感じになる。

    $('.bxslider').bxSlider({
      slideWidth: 200,
      minSlides: 4,
      maxSlides: 5
    });

デモ

サムネイル付き

サムネイル付きにする場合は下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet">
<script src="jquery.bxslider.min.js"></script>
<script>
  $(function(){
    $('.bxslider').bxSlider({
      slideWidth: 800,
      pagerCustom: '#bx-pager'
    });
  });
</script>
<style>
/* ulのマージンを0にしとかないと、なぜか変な余白ができてしまう */
ul {
	margin: 0;
}
</style>
</head>
<body>
<ul class="bxslider">
  <li><img src="images/001.png" /></li>
  <li><img src="images/002.png" /></li>
  <li><img src="images/003.png" /></li>
  <li><img src="images/004.png" /></li>
  <li><img src="images/005.png" /></li>
</ul>
<div id="bx-pager">
  <a data-slide-index="0" href=""><img src="images/001.png" width="200" /></a>
  <a data-slide-index="1" href=""><img src="images/002.png" width="200" /></a>
  <a data-slide-index="2" href=""><img src="images/003.png" width="200" /></a>
  <a data-slide-index="3" href=""><img src="images/004.png" width="200" /></a>
  <a data-slide-index="4" href=""><img src="images/005.png" width="200" /></a>
</div>
</body>
</html>

デモ