BxSlider는 첫 번째 슬라이드로 마지막 슬라이드를 표시합니다.

Question

4 개의 슬라이더를 만들었습니다. 처음에는 모두 4 개가 숨겨져 있습니다 (표시 : 없음).이 코드를 사용하여 관련 카테고리를 클릭 할 때 관련 슬라이더를 표시했습니다.

슬라이더 구성입니다. 슬라이더가 처음으로 슬라이드 마지막 슬라이드 표시된 슬라이드의 개수를 반전 미만 20 개 슬라이드를 갖는 경우

touchEnabled: true, 
    hideControlOnEnd: true, 
    preloadImages: 'all', 
    infiniteLoop: false, 
    mode: 'horizontal', 
    startSlide: 0, 
    slideWidth: 300, 
    minSlides: 2, 
    maxSlides: 3, 
    slideMargin: 10, 
    pager: false, 
    slideSelector: ".isotope-item", 
    nextSelector: "#forefoo2_next", 
    prevSelector: "#forefoo2_prev", 
    nextText: '', 
    prevText: '', 
    onSliderLoad: function(){ 
     jQuery(".sliloading").hide(); 
    }, 


jQuery(window).ready(function(){ 
    var slider4 = jQuery('.cat_fore').bxSlider(); 
    var slider2 = jQuery('#cat_two').bxSlider(); 
    var slider3 = jQuery('.cat_three').bxSlider(); 
    var slider1 = jQuery('.cat_one').bxSlider(); 

    jQuery("#sel_cat a").on("click", function(){ 
     var current  = jQuery(this).attr("slider"); 
     jQuery(".sliloading").show(); 

     jQuery(".slider").hide(); 
     if(current == "cat_one"){ 
      slider1.reloadSlider(s1config); 
     }else if(current == "cat_two"){ 
      slider2.reloadSlider(s2config); 
     }else if(current == "cat_three"){ 
      slider3.reloadSlider(s3config); 
     }else if(current == "cat_fore"){ 
      slider4.reloadSlider(s4config); 
     } 
    } 
}); 

문제이다.

슬라이드의 경우 20 개 이상, 20 개는 정상적으로 작동합니다. 나는 또한 this link에 나와있는 다른 솔루션을 시도했지만 나에게 아무런 효과가 없었다.
내가는 잘 작동하지만 live에 여전히

나는 문제가 높이거나 마지막 슬라이드에서 시작하고있다 다른 CSS 요소에 생각 같은 문제를주고있다 fiddle에서 같은 예를 복제 시도 왜냐하면 바이올린에서보기 포트가 작기 때문에 첫 번째 슬라이드 슬라이더를 표시하고 브라우저의보기 포트 크기를 줄이려고 시도했을 때 올바른 방법으로 슬라이더를 표시하기 때문입니다.

Answer 1

나도 최근에이 문제가되었다. 해결 방법은 $ (window) .ready()가 아닌 $ (window) .load() 이벤트에 BxSlider의 인스턴스를 넣어야한다는 것입니다. 여기에 샘플이 있습니다.

$(window).load(function(){ 
      $('.bxslider').bxSlider({ 
       pagerCustom: '#bx-pager', 
       randomStart: false, 
       controls: true, 
       auto: true 
      });  
     }); 

당신이 적어도 7 개 슬라이드를 일단 문제가 지속 시작하는 것이 중요하다.

Answer 2

좋아요. 왜 그런 줄을 모르지만 "minSlides : 2"줄을 제거하면 제대로 작동하기 시작합니다.

Answer 3

빠른 솔루션 :

.bx-clone{ 
    display: none !important; 
} 

당신이 infiniteLoop 애니메이션 잃고 싶지 않는 경우 :

onSliderLoad: function() { 
     $("YOUR_SLIDER_SELECTOR").css(
     "-webkit-transform", 
     "translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)" 
    ); 
    } 

Answer 4

슬라이더의 이미지에 명시적인 높이 및 너비 태그를 설정하면 2-5 개의 이미지가 포함 된 슬라이더로이 문제가 해결되었습니다.

Answer 5

이것은 나에게 크롬 전용 버그입니다. 마지막 슬라이드부터 첫 번째 슬라이드로 연속 스크롤하기위한 "복제본 슬라이드"는 실제 첫 번째 슬라이드를 먼저 밀어내는 것을 보여줍니다. 클론 슬라이드를 숨기는 것은 빠른 수정이지만 무한 스크롤 효과를 없애줍니다. 이 아래 솔루션은 엄격하게 CSS와 나를 위해 그것을 고정

, 더 밥맛 3D가 ... CSS, JQuery와, 또는 아무것도 변화하지

이제 부트 스트랩으로 확인한다 :

/* BUG FIX FOR CLONE SLIDE FIRST */ 

.bx-wrapper img { 
    max-width: 100%; 
    display: inline-block; 
} 

.bx-viewport li { 
    min-height: 1px; 
    min-width: 1px; 
} 

당신이 jQuery를 사용하는 경우 내 생각 onSlide를 사용하여 복제본을 표시합니다. 너무 멀리 지나갔 기 때문에 특정 상황에 따라 CSS 수정이있을 수 있습니다. 때로는 이미지 크기 및/또는 BOOTSTRAP의 디스플레이 스타일 문제에서 비롯된 것입니다. 따라서 BS를 사용하고 있다면 CSS 수정이 필요합니다. 일반적으로 모든 슬라이드가 같은 크기이면 이미지의 높이와 너비, 최대 높이와 ​​너비 및 최소 높이와 너비를 설정해보십시오.

이 필요하지 않습니다,하지만 작동하지 않는 경우 bxSlider에 초기화 옵션 useCSS 시도 : 거짓, 예 : OG 숀에서 언급 한 바와 같이

$(window).load(function(){ 
     $('.bxslider').bxSlider({ 
      pagerCustom: '#bx-pager', 
      randomStart: false, 
      controls: true, 
      auto: true 
      useCSS:false 
     });  
    }); 

Answer 6

가 크롬 버그를 키우면을. 당신은 그냥 루프 중지해야

.bx-viewport li { min-height: 1px; min-width: 1px; } 

Answer 7

:

나는 같은 문제와 내가이 CSS 코드이었다 시도 할 때 필요한 유일한 HADE

infiniteLoop:false 

을 ... 그리고 거기 더 이상 .bx - 클론

http://bxslider.com/options

Answer 8

는 bxslider 웨스턴 오스트 레일 리아 작업하지 내 인생의 가장 큰 실수 야.