カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

jQueryプラグイン「bxSlider」を使う

この記事は最終更新日から1年以上経過しています。

スライドショーを実装してくれる「bxSlider」をご紹介します。
これまでにもスライドショーを実装できる色々なプラグインをご紹介しましたが、
最近はこれをよく使います。

bxSlider

まずはjQueryを読み込む。

<script src="./jquery-1.9.1.min.js"></script>

※ちなみに、jQueryが3.1.1だとエラーが発生しました。

続いてbxSliderのファイルを読み込みます。

<link href="./bxslider/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript" src="./bxslider/jquery.bxslider.min.js"></script>

スライドさせたい内容を用意します。

<ul class="bxslider">

    <li>
        <img src="./images/exam_picture1.jpg">
    </li>

    <li>
        <img src="./images/exam_picture2.jpg">
    </li>

    <li>
        <img src="./images/exam_picture3.jpg">
    </li>

</ul>

まずは簡単に実装してみましょう。

<script type="text/javascript">
<!--//
(function($) {
    $(document).ready(function(){

        $('.bxslider').bxSlider({
            auto: true,
            autoHover: true,
        });

    });
})(jQuery);
//-->
</script>


ここで指定したオプション

auto true/false 自動再生するかどうか
autoHover true/false マウスオーバーで自動再生を止めます

色や余白、セレクター等を変更したかったので、サイトを参考にしながらカスタマイズしてみました。

HTMLを少し追加します。

<ul class="bxslider">

    <li>
        <img src="./images/exam_picture1.jpg">
    </li>

    <li>
        <img src="./images/exam_picture2.jpg">
    </li>

    <li>
        <img src="./images/exam_picture3.jpg">
    </li>

</ul>
<p class="slider-control"><span class="slider-prev"></span><span class="slider-next"></span><div class="float_clear"></div></p>

セレクターを任意のものにするため、タグとクラス、中のテキストをオプションで指定します。

<script type="text/javascript">
<!--//
(function($) {
    $(document).ready(function(){

        $('.bxslider').bxSlider({
            auto: false,
            nextSelector: 'span.slider-next',
            prevSelector: 'span.slider-prev',
            nextText: '&raquo;',
            prevText: '&laquo;',
        });

    });
})(jQuery);
//-->
</script>

ここで指定したオプション

auto true/false 自動再生するかどうか
nextSelector tag.class セレクターのタグとクラス名
prevSelector tag.class セレクターのタグとクラス名
nextText テキスト セレクターのテキスト
prevText テキスト セレクターのテキスト

デザインを変更するためにCSSを上書きします。
クラス名についてはjquery.bxslider.cssを紐解くか参考サイトをご覧ください。

基本的には.bx-wrapperが.bx-viewport、.bx-prev、bx-next、bx-pagerなどを包括していると考えて良さそうです。

まずは全体のCSSを設定。

.bx-wrapper {
    width: 100%;
    margin: 0 auto;
}

ちなみにここで指定しているCSSにはデフォルトの設定を上書きで無効にするために指定しているだけのものもあります。

実際に画像が表示される.bx-viewportのCSSを設定。
left: 0を指定しているのは画像がずれて表示されるためです。
デフォルトで表示される影や背景を削除します。

.bx-wrapper .bx-viewport {
    left: 0;
    box-shadow: none;
    background: none;
    margin: 0;
    padding: 0;
    border: 0;
}

デフォルトのページ送りが表示されないようにします。

.bx-wrapper .bx-prev {
    height: auto;
    left: -15px;
    background: none;
}

.bx-wrapper .bx-next {
    height: auto;
    right: -15px;
    background: none;
}

セレクターに関する設定を行います。
特にこちらは任意で好きなようにしてください。

p.slider-control {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    border: 1px solid #333;
    top: 0;
    left: 0;
    z-index: 9999;
}
p.slider-control span {
    margin: 0;
    padding: 0;
    display: inline-block;
}
span.slider-prev {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: left;
}
span.slider-next {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: right;
    text-align: right;
}
span.slider-prev a, span.slider-next a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    margin: 0;
    padding: 0 10px;
}
p.slider-control span a:hover {
    color: #f0f5ff;
}

カルーセルのドットカラーを変える

.bx-wrapper .bx-pager {
    color: #fff;
    margin: 0;
    padding: 10px;
    position: relative;
    bottom: 0;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    background: #ffffff;
}

/* マウスオーバー */
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #ffff00;
}

カスタマイズの際、参考にさせていただいたサイト
http://yane-ni-kabochano.com/blog/?p=7

この記事がお役に立ちましたらシェアお願いします

730 views

コメントは受け付けていません。