【jQuery】bxSliderで高さが正常に取得できないときの対処法

2019.04.18

bxSliderを使っている部分に対して予めCSSなどで非表示(display: none)をかけていた場合、画像の高さが上手く取得できずに、bx-viewportの高さが0になってしまう。

例えば、初期状態は非表示で、ボタンをクリックしたら開くナビゲーションの中にスライダーを入れたいとき。

<div class="nav_wrap">
    <div class="nav_btn"></div>
    <ul class="bxslider">
        <li><img src="img_01.jpg"></li>
        <li><img src="img_02.jpg"></li>
        <li><img src="img_03.jpg"></li>
    </ul>
</div>

</ul>

</div>

$(function() {
    var slider = $('.bxslider').bxSlider();
    var sliderWrap = $('.slider_wrap');
    var navBtn = $('.nav_btn');
    var breakpoint = 480;
 
    $(navBtn).click(function() {
        sliderWrap.toggleClass('open');
        slider.redrawSlider();
    });
});

$(function() {

var slider = $('.bxslider').bxSlider();

var sliderWrap = $('.slider_wrap');

var navBtn = $('.nav_btn');

var breakpoint = 480;

$(navBtn).click(function() {

sliderWrap.toggleClass('open');

slider.redrawSlider();

});

※jQueryではナビゲーションの親要素にclass=”open”をつけたり外したりするだけで、表示状態の指定はcssで行う。

【jQuery】bxSliderで高さが正常に取得できないときの対処法

関連タグ