【jQuery】bxslider

Image

Web制作をしているとスライダーを扱う機会が多くあります。メインのキービジュアルやサブコンテンツ、詳細ページ等、様々箇所で利用します。

今回は豊富なオプションがあり、レスポンシブにも対応しているbxsliderをご紹介したいと思います。

bxsliderとは

bxsliderはシカゴのWeb開発者が提供しているオープンソースのjQueryプラグインです。厳密にはオープンソースの中のひとつであるMIT Licenseというものになります。MIT Licenseは改変、再配布、商用利用等が許されているライセンスなので、プラグインを編集してサイトに利用することができます。

bxsliderを使ってみる

早速、bxsliderの使い方をご紹介したいと思います。

bxsliderは以下のページでダウンロードすることができます。

bxslider

ダウンロードした圧縮ファイルを展開すると多くのファイルが内包されていると思います。が、使用するのは以下のファイルとフォルダです。

image

jquery.bxslider.css

jquery.bxslider.js

imageフォルダには、prev、nextアイコンや画像読み込み中に表示されるローダーの画像ファイルが入っています。imageフォルダはjquery.bxslider.cssを配置するフォルダと同じ階層に置かないと読み込まれないため、注意しましょう。(jquery.bxslider.cssの画像パスを変更すれば別の階層でも問題ありません。)

後は上記ファイルをスライダーを実装するページで読み込みます。bxsliderはjQueryのプラグインなので、ライブラリファイルが必要になります。

bxliderのファイルを「head」に記述する

<link href="jquery.bxslider/jquery.bxslider.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="jquery.bxslider/jquery.bxslider.js"></script>

基本のスライダー

bxsliderの基本となるスライダーです。オプションを指定していない状態です。

Demo

HTML

<header>
  <h1>Into the Program</h1>
</header>
<main>
  <section>
    <ul class="bxslider">
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
    </ul>
  </section>
</main>

CSS

html,
body {
  margin: 0;
  padding: 0;
}
header > h1 {
  color: #555;
}
section {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
  background: #aaa;
}
.bx-wrapper {
  width: 720px;
  margin: 0 auto;
  border: none;
  box-shadow: none;
}

JS

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

ページャーをサムネイルにする

基本スライダーのページャーをサムネイルにしたものです。オプションには自動再生とスライドの表示時間、サムネイルをページャーにするためcustomPagerにページャーとなる要素を指定しています。メインスライドに表示されている画像をわかりやすくするためにactive状態のページャーにスタイルを定義しています。

Demo

HTML

<main>
  <section>
    <ul class="bxslider">
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
    </ul>
    <div class="bxpager">
      <a data-slide-index="0" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
      <a data-slide-index="1" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
      <a data-slide-index="2" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
      <a data-slide-index="3" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
      <a data-slide-index="4" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
      <a data-slide-index="5" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
    </div>
  </section>
</main>

CSS

html,
body {
  margin: 0;
  padding: 0;
}
header > h1 {
  color: #555;
}
section {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
  background: #aaa;
}
.bx-wrapper {
  width: 720px;
  margin: 0 auto;
  border: none;
  box-shadow: none;
}
.bxpager > a > img {
  width: 125px;
  height: auto;
  margin: 40px 0 0 0;
  transition: 0.3s;
}
.bxpager > a > img:hover {
  opacity: 0.5;
}
.active {
  opacity: 0.5;
}

JS

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
    auto: true,
    pause: 5000,
    pagerCustom: '.bxpager'
  });
});
</script>

サムネイルページャーをスライダーにする

上記のサムネイル付スライダーに処理を追加したものです。サムネイルのページャーがスライダーになります。ページャーとなるスライダーのオプションには表示するスライド枚数、幅、間隔を指定しています。

Demo

HTML

<header>
  <h1>Into the Program</h1>
</header>
<main>
  <section>
    <div class="main">
      <ul class="bxslider">
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
        <li><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></li>
      </ul>
    </div>
    <div class="pager">
      <div class="bxpager">
        <a data-slide-index="0" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
        <a data-slide-index="1" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
        <a data-slide-index="2" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
        <a data-slide-index="3" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
        <a data-slide-index="4" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
        <a data-slide-index="5" href=""><img src="//into-the-program.com/asset/images/article/bxslider-demo.png"></a>
      </div>
    </div>
  </section>
</main>

CSS

html,
body {
  margin: 0;
  padding: 0;
}
header > h1 {
  color: #555;
}
section {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
  background: #aaa;
}
.main > .bx-wrapper {
  width: 720px;
  margin: 0 auto;
  border: none;
  box-shadow: none;
}
/* pager */
.pager {
  margin: 40px 0 0 0;
}
.pager > .bx-wrapper {
  width: 1000px;
  margin: 0 auto;
  border: none;
  box-shadow: none;
  background: transparent;
}

JS

<script>
$(document).ready(function(){
  $('.bxslider').bxSlider({
    pagerCustom: '.bxpager',
    controls: false
  });
  $('.bxpager').bxSlider({
    pager: false,
    minSlides: 5,
    maxSlides: 5,
    slideWidth: 125,
    slideMargin: 24
  });
});
</script>

SHARE