こんにちは、Ryohei（@ityryohei）です！

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>
この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。