ミギムキ

[CSS] bxSliderのbx-cloneクラスを無効にしたい

公開日:2018/10/08 更新日:2018/11/19

やりたいこと

bxSliderを使って並べた画像をスライドさせていき、フォーカスのあたっていない画像は暗く装飾したい、ということがあります
bxSliderでは、フォーカスのあたっている画像に対して「.active」クラスを自動で設定してくれます。そのため「.active」クラスの有無によってスタイルを分けることで見た目を変えることができます
が、デフォルトのbxSliderでは、.bx-cloneというクラスが設定されたダミーの画像リンクが生成され、.activeクラスはダミーの方に適用されてしまいます
ダミー画像に対して透過率を変えようとしてもスタイルが反映されず。さて困ったということで、対処方法を調べました

infiniteLoopを無効にする

jQuery(function($) {
    $('.slider_pager').bxSlider({
        infiniteLoop: false,
        /* 〜他に設定したいパラメーター〜 */
    });
});

仕組み、解説、補足など

「infiniteLoop」プロパティを「false」にすれば、.bx-cloneクラスのダミーが生成されなくなります
これで.activeクラスは各画像に対して付与されるようになり、透過率などのスタイルの切り替えができるようになります

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。