【jQuery】bxSliderでスマホサイズ時のみスライダーにする方法

2019.03.11

レスポンシブサイトで、PCではリスト表示、スマホではスライダー表示に出し分けたい時のメモ。

(bxSliderを使用)

<ul id="slider">
    <li><img src="img/img01.jpg" /></li>
    <li><img src="img/img02.jpg" /></li>
    <li><img src="img/img03.jpg" /></li>
    <li><img src="img/img04.jpg" /></li>
    <li><img src="img/img05.jpg" /></li>
</ul>

</ul>

$(function() {
    var slider;
    var sliderFlag = false;
    var breakpoint = 480;
 
    $(window).on('load resize', function() {
        sliderSet();
    });
 
    function sliderSet() {
        var windowWidth = $(window).width();
        if (windowWidth <= breakpoint && !sliderFlag) {
            slider = $('#slider').bxSlider();
            sliderFlag = true;
        } else if (windowWidth > breakpoint && sliderFlag) {
            slider.destroySlider();
            sliderFlag = false;
        }
    }
});

$(function() {

var slider;

var sliderFlag = false;

var breakpoint = 480;

$(window).on('load resize', function() {

sliderSet();

});

function sliderSet() {

var windowWidth = $(window).width();

if (windowWidth <= breakpoint && !sliderFlag) {

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

sliderFlag = true;

} else if (windowWidth > breakpoint && sliderFlag) {

slider.destroySlider();

sliderFlag = false;

}

});

【jQuery】bxSliderでスマホサイズ時のみスライダーにする方法

関連タグ