javascript - BxSlider destroySlider() 函数不工作 : slider undefined or is not a function

Question

我使用 bxslider 在轮播中显示了一堆帖子。触发轮播的代码如下所示:

jQuery(document).ready(function() {

var carouselWidth = 640;
var carousel;
var carousel_Config = {
          minSlides: 1,
          maxSlides: 5,
          slideWidth: 285,
          slideMargin: 25,
          controls: false,
          pagerSelector: '.pager'
}

    if( jQuery(window).width() > carouselWidth) {
        carousel = jQuery('.event-carousel').bxSlider(carousel_Config);
    };

    jQuery(window).resize(function() {
        if( jQuery(window).width() > carouselWidth) {
            carousel = jQuery('.event-carousel').bxSlider(ttCarousel_Config);
        } else {
            carousel.destroySlider();
        }
    });

});

很简单，对吧？

问题是 destroySlider() 不起作用:我知道“旋转木马”未定义。如果我尝试使用:

jQuery('.event-carousel').bxSlider().destroySlider();

我试图在 jQuery(document...) 之外声明“carousel” putting var carousel;在脚本的顶部，但我总是在控制台中得到相同的结果:Carousel is undefined。

我该如何解决这个问题？

Answer 1

请你试试下面的代码:

jQuery(document).ready(function() {

var carouselWidth = 640;
var carousel = null;
var carousel_Config = {
          minSlides: 1,
          maxSlides: 5,
          slideWidth: 285,
          slideMargin: 25,
          controls: false,
          pagerSelector: '.pager'
}

    if( jQuery(window).width() > carouselWidth) {
        if(carousel == null)
            carousel = jQuery('.event-carousel').bxSlider(carousel_Config);
    };

    jQuery(window).resize(function() {
        if( jQuery(window).width() > carouselWidth) {
            if(carousel == null)
                carousel = jQuery('.event-carousel').bxSlider(ttCarousel_Config);
            else
                carousel.reloadSlider(); //reloading the slider if already instance present
        } else {
            if(carousel){
                carousel.destroySlider();
                carousel = null;
            }
        }
    });

});

销毁前请检查carousel 对象。这同样适用于初始化 carousel。如果它已经存在，则无需创建/重新初始化轮播。