「bxSlider」の使い方を紹介【オプションも解説】

画像をスライドさせたい

浦島です、今回は簡単にスライダーが作れるjQuery 「bxSlider」を紹介します。
本当に超簡単です。

公式サイトで動作をサンプルをご覧ください。

bxsliderの公式サイトへ

工程

１適当な画像を３枚とindex.htmlを用意しましょう。

画像はO-DANというサイトからダウンロードしてきました。
おしゃれなフリー画像がたくさんありおすすめです。

今回はわかりやすい様に画像の名前を１、２などにしてみました。

下記のコードをindex.htmlに貼りましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
    <title>bxslider test</title>
    <style>
    .slider,img{
        width: 640px;
        height: 300px;
        margin: 0 auto;
        display: block;
    }
    </style>
</head>

<body>
    <div class="slider">
        <div><img src="1.png" alt=""></div>
        <div><img src="2.png" alt=""></div>
        <div><img src="3.png" alt=""></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.slider').bxSlider();
        });
    </script>
</body>

</html>

<!DOCTYPE html>

<head>

<title>bxslider test</title>

<style>

.slider,img{

width: 640px;

height: 300px;

margin: 0 auto;

display: block;

}

</style>

</head>

<body>

</div>

$(document).ready(function () {

$('.slider').bxSlider();

});

</script>

</body>

</html>

たったのこれだけで、スライダーが完成しちゃいます。

<script>
        $(document).ready(function () {
            $('.slider').bxSlider({
                auto: true,
                pager: false,
                controls: false
            });
        });
    </script>

$(document).ready(function () {

$('.slider').bxSlider({

auto: true,

pager: false,

controls: false

});

</script>

上のコードで自動で画像を切り替えたりなどが可能です。

様々なオプションがあるので試してみてください

オプション項目	オプション説明	オプション記述方法
mode	スライド方法を設定「horizontal」横方向のスライド「vertical」縦方向のスライド「fade」フェードでの切り替え default: ‘horizontal’	horizontal / vertical / fade
auto	自動スライドの設定 default: false	true / false
speed	default: 500	数字（例：1000）
pause	スライドしてから次のスライドまでの待ち時間の設定 default: 4000	数字（例：3000）
infiniteLoop	スライドをループさせるかどうかの設定 default: true	true / false
captions	画像にキャプションを表示する事ができます。タグのtitleプロパティ内に記述したものが表示されます。 default: false	true / false
responsive	レスポンシブに対応するかどうかの設定 default: true	true / false
touchEnabled	タッチスワイプを許可するかを設定 default: true	true / false
pager	ページ送りを追加するかどうかの設定 default: true	true / false
controls	前後のコントロールを追加するかどうかの設定。 default: true	true / false
nextText	nextのテキストを設定 default: ‘Next’	任意のテキスト（例：次へ）
prevText	prevのテキストを設定 default: ‘Prev’	任意のテキスト（例：前へ）
nextSelector	「nextボタン」を自分で用意する場合にjQueryセレクタで指定 ※指定するとデフォルトのボタンは表示されなくなる	任意のクラスやID（例：’#next-btn’）
prevSelector	「prevボタン」を自分で用意する場合にjQueryセレクタで指定 ※指定するとデフォルトのボタンは表示されなくなる	任意のクラスやID（例：’#prev-btn’）
useCSS	スライドにCSSアニメーションを使用するかどうかの設定 default: true	true / false
easing	スライドのイージングの設定 default:なし	useCSSがtrueの場合 ‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘cubic-bezier(n,n,n,n)’useCSSがfalseの場合 ‘swing’, ‘linear’
autoDirection	スライドの方向 default: ‘next’	‘next’, ‘prev’
autoHover	スライドをホバーした時に、スライドを一時的に止めるかどうかの設定 default: false	true / false
minSlides	（カルーセル設定）一度に表示させる最小数を設定 default:なし	数字（例：1）
maxSlides	（カルーセル設定）一度に表示させる最大数を設定 default:なし	数字（例：4）
moveSlides	（カルーセル設定）一度のスライド時に移動するスライド数	数字（例：4）
slideWidth	各スライドの幅を指定	数字（例：400）