bxslider reloadSlider 슬라이더를 다시로드하고 머리를 감 쌉니다.

Q 완전히 반응하는 레이아웃을 갖기 위해 슬라이더를 다시로드하려고합니다. 이렇게하려면 슬라이더를 다시로드해야합니다! 주요 문제는 다시로드하기 때문에 슬라이더가 변경된다는 것입니다. 따라서 크기를 조정할 때마다 첫 번째 슬라이드부터 시작됩니다.bxslider reloadSlider 슬라이더를 다시로드하고 머리를 감 쌉니다.

아무도 내 reload/resize에 슬라이드의 점프가 없어 솔루션을 나타낼 수 있을까 ???

악몽! 악몽! 악몽! http://jsfiddle.net/j3hgA/17/

// 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을 시작으로 그것을 사용할 수 있습니다.

이제 getCurrentSlide() 메서드는 bxSlider 객체에서만 호출 할 수 있습니다. 따라서 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 당신이 바이올린에 추가 된 CDN 링크를 사용하여 bxslider하지 부하를 않습니다.
클래스를 사용하는 경우 항상 useCSS:false을 bxSlider 객체로 전달하십시오. 그렇지 않으면 임의의 동작이 나타날 수 있습니다.
tourLandingScript()에서 주석 처리 된 줄의 주석 처리를 제거하여 값을 확인할 수 있습니다. 또한 호출기가 한 설정에서는 켜져 있고 다른 설정에서는 꺼져 있습니다. 여전히 badly.each 시간을 resizeing 것

출처

2014-02-25 17:05:08 DhruvJoshi

덕분에 당신이 대답을하지만 – user2505665

this.getCurrentSlide는 함수가 아닙니다 O를 내가 수와 슬라이더의 시작 크기를 조정 startnum = this.getCurrentSlide(); – user2505665

@ user2505665 예! 너 나 거기있어. 내 대답을 업데이트 할게. 바라건대 내가 너에게 한 일은 잘 되길 바란다. – DhruvJoshi

bxslider reloadSlider 슬라이더를 다시로드하고 머리를 감 쌉니다.

답변

관련 문제