JQueryのスライダープラグイン「bxSlider」が便利！使い方を徹底解説！

2020年2月16日2021年2月2日

WEBサイトを開発していると、スライダーを作りたくなることがあると思います。

そんな時に便利なのが、bx-sliderです！

bx-sliderはJQueryプラグインで、簡単に使える、レスポンシブデザインにも対応している、動画も使えることから、開発者から高い人気を得ています。

Contents

1. 使い方
- 1.1. General

使い方

下記がサンプルです。

ゲームを実況する男
団結する社会人
eスポーツプレイヤー

サンプルコードをご覧ください。中身は適当なので、適宜置き換えてください。

<!doctype html>
<html lang="ja">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <style>
     img {
         margin:0 auto;
     }
    .slider_text{
        text-align: center;
    }
   </style>
</head>
<body>
<div id="slider">
  <ul class="slide_container">
    <li><img src="sample01.png"><p>ゲームを実況する男</p></li>
    <li img="sample02.png"><p>団結する社会人</p></li>
    <li img="sample03.png"><p>eスポーツプレイヤー</p></li>
  </ul>
</div>
</body>
<script>
window.onload = function(){
    $(document).ready(function(){
        $('.slide_container').bxSlider({
            auto: true,
            pause: 5000,
            controls: false,
        });
    });
}
</script>

<!doctype html>

<head>

<style>

img {

margin:0 auto;

}

.slider_text{

text-align: center;

}

</style>

</head>

<body>

<li><img src="sample01.png"><p>ゲームを実況する男</p></li>

<li img="sample02.png"><p>団結する社会人</p></li>

<li img="sample03.png"><p>eスポーツプレイヤー</p></li>

</ul>

</div>

</body>

window.onload = function(){

$(document).ready(function(){

$('.slide_container').bxSlider({

auto: true,

pause: 5000,

controls: false,

});

}

</script>

scriptタグにあるスクリプトがbx-sliderに関する記述です。詳細を見てみましょう。

と言ってもやってるのは、クラス(またはid)を指定して、bx-sliderの設定をするだけです。

今回は下記３つのオプションを使用しています。

auto
pause
controls

これ以外にも様々なオプションがあり、自由自在のスライドを作ることができます。

一部を下記に紹介します。全てのオプションは公式リファレンスをチェック！

General

mode

スライド形式を選べる。縦スライド、横スライド、フェードの３種類から選べる。デフォルト値は「’horizontal’」

選択できる値：’horizontal’, ‘vertical’, ‘fade’

speed

スライドするスピードをms形式で指定できる。デフォルト値は「500」

slideMargin

スライダーのコンテンツ部分について、マージンを指定できる。

startSlide

最初のスライドを選択できる。一番目のスライド=0、二番目のスライド=1になる。

randomStart

最初のスライドをランダムに選ぶかを選択できる。デフォルト値は「false」

選択できる値：true, false

slideSelector

スライドさせる要素を選択する。デフォルト値はなし

選択できる値：クラス名(div.slide_nameなど)

infiniteLoop

無限にループさせるか。デフォルト値は「true」

選択できる値：true, false

プログラミング

Posted by trs0125