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

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 宽则销毁滑块

bxSlider, destroy the slider if screen is wider than X

jquery

bxslider