Question

我正在尝试仅在屏幕较小时使用jQuery bxSlider，用于移动设备。所以我调用这个函数并且if / else语句的第一部分工作，但不是我试图破坏滑块的第二个“else”：

$(window).on("resize", function (e) {
        checkScreenSize();
    });

    checkScreenSize();

    function checkScreenSize(){

        var slider = $(".thumbnails-custom-list").bxSlider();

        var newWindowWidth = $(window).width();
        if (newWindowWidth < 481) {

            $(".thumbnails-custom-list").bxSlider();

        } else {
             $(".thumbnails-custom-list").bxSlider().destroySlider();
        }

    }

我收到控制台错误：

“。destroySlider不是函数”

Answer 1

将滑块存储在全局声明的变量中，然后在该变量上销毁bxSlider。

$(window).on("resize", function (e) {
        checkScreenSize();
    });

    checkScreenSize();

    function checkScreenSize(){

        slider = $(".thumbnails-custom-list").bxSlider({    minSlides: 1,
maxSlides: 8,
slideWidth: 189,
slideMargin: 0,
ticker: true,
speed: 50000});

        var newWindowWidth = $(window).width();
        if (newWindowWidth >= 481) {
            // destroy slider
            slider.destroySlider();
        }

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<ul class="thumbnails-custom-list">
  <li><img src="http://placehold.it/160x189&text=1" /></li>
  <li><img src="http://placehold.it/160x189&text=2" /></li>
  <li><img src="http://placehold.it/160x189&text=3" /></li>
  <li><img src="http://placehold.it/160x189&text=4" /></li>
  <li><img src="http://placehold.it/160x189&text=5" /></li>
  <li><img src="http://placehold.it/160x189&text=6" /></li>
  <li><img src="http://placehold.it/160x189&text=7" /></li>
  <li><img src="http://placehold.it/160x189&text=8" /></li>
</ul>

bxSlider，如果屏幕宽于X，则销毁滑块

1 个答案: