bxslider reloadSlider重新加載滑塊並制動Cicle

我試圖重新加載滑塊以獲得完全響應的佈局。要做到這一點，我需要重新加載滑塊！主要問題是滑塊因爲重新加載而改變。因此，每次調整大小時都會從第一張幻燈片開始。bxslider reloadSlider重新加載滑塊並制動Cicle

任何人都可以表明我的解決方案沒有這個跳轉的重載/調整大小的幻燈片？

// initiates responsive slide gallery   
var settings = function() { 
    var settings1 = { 
     pager: 'false', 
     minSlides: 1, 
     maxSlides: 1, 
     startSlide: 1, 
     moveSlides: 1, 

     onSlideBefore: 

     function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
      $('#carousel > li.active').removeClass('active'); 
      $('#carousel > li').eq(currentSlideHtmlObject - 1).addClass('active'); 
     }, 

     onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
      $('#carousel > li.active').removeClass('active'); 
      $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active'); 
     }, 

     onSliderLoad: function (currentSlideHtmlObject) { 
      $('#carousel').removeClass('settings2'); 
      $('#carousel').css('display', 'block').addClass('settings1'); 
      $('#carousel').fadeIn('slow'); 
      $('#carousel > li.active').removeClass('active'); 
      $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active'); 

      $('.bx-controls').hover(

      function() { 
       $('#carousel li a figure').addClass("hover").end(); 
      }, 

      function() { 
       $('#carousel li a figure').removeClass("hover").end(); 
      }); 

     } 

    }; 
    var settings2 = { 
     pager: 'true', 
     minSlides: 1, 
     maxSlides: 3, 
     startSlide: 0, 
     moveSlides: 1, 
     onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
      $('#carousel > li.active').removeClass('active'); 
      $('#carousel > li').eq(currentSlideHtmlObject - 1).addClass('active'); 
     }, 

     onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
      $('#carousel > li.active').removeClass('active'); 
      $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active'); 
     }, 

     onSliderLoad: function (currentSlideHtmlObject) { 
      $('#carousel').removeClass('settings1'); 
      $('#carousel').css('display', 'block').addClass('settings2'); 
      $('#carousel').fadeIn('slow'); 
      $('#carousel > li.active').removeClass('active'); 
      $('#carousel > li').eq(currentSlideHtmlObject + 1).addClass('active'); 

      $('.bx-controls').hover(

      function() { 
       $('#carousel li a figure').addClass("hover").end(); 
      }, 

      function() { 
       $('#carousel li a figure').removeClass("hover").end(); 
      }); 

     } 
    }; 
    return ($(window).width() < 1600) ? settings1 : settings2; 
} 

var mySlider; 

function tourLandingScript() { 
    mySlider.reloadSlider(settings()); 
} 

mySlider = $('#carousel').bxSlider(settings()); 
$(window).resize(tourLandingScript);

來源

2014-02-25 user2505665

您可以將使用getCurrentSlide()當前幻燈片編號和使用，作爲起始startSlide。

現在只能在bxSlider對象上調用方法getCurrentSlide()。因此它必須在bxSlider被初始化後調用，否則它將給出一個undefined值。這是以前發生的事情。所以我繼續並修改了一些代碼來創建這個工作示例。

<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.bxslider.min.js"></script> 
<!-- bxSlider CSS file --> 
<link href="jquery.bxslider.css" rel="stylesheet" /> 
<script> 
$(document).ready(function(){ 
    var startnum=0,mySlider, settings1 = { 
     pager:true, 
     startSlide: 0, 
     auto:false, 
     useCSS:false, 
     onSlideBefore:function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {}, 
     onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {}, 
     onSliderLoad: function (currentSlideHtmlObject) {} 
    }, settings2 = { 
     pager: false, 
     startSlide: 0, 
     auto:false, 
     useCSS:false, 
     onSlideBefore:function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {}, 
     onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {}, 
     onSliderLoad: function (currentSlideHtmlObject) {} 
    }; 
    function settings() {return ($(window).width() < 1200) ? settings1:settings2;} 
    mySlider=$('.bxslider').bxSlider(settings()); 
    function tourLandingScript() { 
     //alert(settings() +" "+ mySlider.getCurrentSlide()); 
     mySlider.reloadSlider($.extend(settings(),{startSlide:mySlider.getCurrentSlide()})); 
    } 
    $(window).resize(tourLandingScript); 
}); 
</script> 
</head> 
<body> 
<ul class="bxslider" > 
    <li><img src="http://www.learningrx.com/images/cognitive-definition.jpg"/></li> 
    <li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-3.jpg" /></li> 
    <li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-2.jpg" /></li> 
    <li><img src="http://designshack.co.uk/wp-content/uploads/multibkg-4.jpg" /></li> 

</ul> 
</body> 
</html>

PS：

的jsfiddle不加載bxslider使用您在小提琴加入CDN鏈接。
當您使用自己的課程時，請務必將useCSS:false傳遞給bxSlider對象，否則您可能會看到一些隨機行爲。
您可以取消註釋tourLandingScript()中的註釋行以驗證值。同時請注意，傳呼機在一個設置中打開，在另一個設置中打開。對於

來源

2014-02-25 17:05:08 DhruvJoshi

感謝你回答，但它仍然resizeing badly.each時間我調整從數滑塊啓動O – user2505665

this.getCurrentSlide不是一個函數 startnum = this.getCurrentSlide（）; – user2505665

@ user2505665是的！你讓我在那裏。我會更新我的答案。希望我爲你工作。 – DhruvJoshi

bxslider reloadSlider重新加載滑塊並制動Cicle

回答

相關問題