BxSlider：在window.resize上調用onSliderLoad

Question

我想在窗口大小上重新加載BxSlider並觸發回調 - 但是，我無法讓它工作。

我有this script當窗口大小小於768px時，它將在單獨的div中克隆和顯示字幕 - 它按預期工作，但在調整瀏覽器窗口大小時不起作用。不知何故onSliderLoad和onSlideBefore中的函數不起作用 - 顯然是因爲字幕已經從DOM中消失了 - 任何想法爲什麼？

我已經使用this guide。

我的代碼：

var windowsize = $(window).width(); 
var slider = $('.bxslider').bxSlider({ 
    auto: true, 
    autoHover: true, 
    controls: false, 
    infiniteLoop: true, 
    onSliderLoad: function(currentIndex) { 
     if (windowsize < 768) { 
      $("#caption").html($('.bxslider li').eq(currentIndex + 1).find(".bx-caption").clone()); 
     } 
    }, 
    onSlideBefore: function($slideElement, oldIndex, newIndex) { 
     if (windowsize < 768) { 
      $("#caption").html($slideElement.find(".bx-caption").clone()); 
     } 
    } 
}); 
$(window).resize(function() { 
    slider.reloadSlider({ 
     auto: true, 
     autoHover: true, 
     controls: false, 
     infiniteLoop: true, 
     onSliderLoad: function(currentIndex) { 
      $("#caption").html($('.bxslider li').eq(currentIndex + 1).find(".bx-caption").clone()); 
     }, 
     onSlideBefore: function($slideElement, oldIndex, newIndex) { 
      if (windowsize < 768) { 
       $("#caption").html($slideElement.find(".bx-caption").clone()); 
      } 
     } 
    }); 
}); 

Answer 1

似乎改變了標題類的名稱和功能內選擇並獲得成功。此代碼有效：

var windowsize = $(window).width(); 
     var slider = $('.bxslider').bxSlider({ 
      auto: true, 
      autoHover: true, 
      controls: false, 
      infiniteLoop: true, 
      onSliderLoad: function(currentIndex) { 
       if (windowsize < 768) { 
        $("#caption").html(""); 
        $('.bxslider li').eq(currentIndex + 1).find(".caption").clone().appendTo("#caption"); 
       } 
      }, 
      onSlideBefore: function($slideElement, oldIndex, newIndex) { 
       if (windowsize < 768) { 
        $("#caption").html(""); 
        $slideElement.find(".caption").clone().appendTo("#caption"); 
       } 
      } 
     }); 
     $(window).resize(function() { 
      slider.reloadSlider({ 
       auto: true, 
       autoHover: true, 
       controls: false, 
       infiniteLoop: true, 
       onSliderLoad: function(currentIndex) { 
        if (windowsize < 768) { 
         $("#caption").html(""); 
         $('.bxslider li').eq(currentIndex + 1).find(".caption").clone().appendTo("#caption"); 
        } 
       }, 
       onSlideBefore: function($slideElement, oldIndex, newIndex) { 
        if (windowsize < 768) { 
         $("#caption").html(""); 
         $slideElement.find(".caption").clone().appendTo("#caption"); 
        } 
       } 
      }); 
     });