BxSlider hiển thị trang trình bày cuối cùng dưới dạng trang trình bày đầu tiên

Question

Tôi đã tạo 4 thanh trượt. Ban đầu tất cả 4 bị ẩn (hiển thị: không có) vì vậy tôi đã sử dụng mã này để hiển thị thanh trượt có liên quan khi nhấp vào danh mục tương ứng của nó.

Cấu hình thanh trượt.

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); 
     } 
    } 
}); 

Vấn đề là khi thanh trượt có ít hơn 20 trang trình bày, nó đảo ngược số lượng trang chiếu được hiển thị trang trình bày cuối cùng làm trang trình bày đầu tiên.

Đối với các trang trình bày 20 trở lên thì 20 trang hoạt động tốt. Tôi cũng đã thử các giải pháp khác nhau được liệt kê trên this link nhưng không có gì hiệu quả đối với tôi.
tôi đã cố gắng để nhân rộng các ví dụ tương tự trên fiddle mà đang làm việc tốt nhưng trên live nó vẫn là cho cùng một vấn đề

Tôi nghĩ rằng vấn đề là ở chiều cao hoặc một số yếu tố css khác mà là làm cho nó bắt đầu từ slide cuối cùng bởi vì trong fiddle cổng xem nhỏ nên nó hiển thị thanh trượt trượt đầu tiên và cũng khi wee cố gắng giảm kích thước của cổng xem của trình duyệt, nó cũng hiển thị thanh trượt đúng cách.

Answer 1

Tôi đã có vấn đề này quá chỉ gần đây. Giải pháp là bạn phải đặt thể hiện của BxSlider vào sự kiện $ (window) .load() không có trong $ (window) .ready() đây là một mẫu.

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

Điều quan trọng cần lưu ý là sự cố bắt đầu tồn tại khi bạn có ít nhất 7 trang trình bày.

Answer 2

Ok Tôi không biết tại sao nhưng khi tôi xóa dòng này "minSlides: 2", nó bắt đầu hoạt động đúng cách.

Answer 3

giải pháp nhanh:

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

Nếu bạn không muốn mất những hình ảnh động infiniteLoop:

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

Answer 4

<li> 
    <img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/> 
</li> 

Đặt thẻ chiều cao và chiều rộng rõ ràng trên hình ảnh trong thanh trượt đã khắc phục vấn đề này cho tôi với thanh trượt chứa 2-5 hình ảnh.

Answer 5

Đây là lỗi chỉ dành cho Chrome, nơi "trượt bản sao" được thiết kế để cuộn liền từ trang trình bày cuối cùng về trang đầu tiên sẽ hiển thị đầu tiên đẩy trang trình bày đầu tiên ra khỏi đường. Ẩn bản sao trượt là một sửa chữa nhanh chóng nhưng phá vỡ hiệu ứng cuộn vô hạn.

giải pháp dưới đây này cố định nó cho tôi đúng với CSS, không có 3D gnarly transform CSS, Jquery, hoặc bất cứ điều gì ... đóng OK với bootstrap bây giờ:

/* BUG FIX FOR CLONE SLIDE FIRST */ 

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

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

Tôi nghĩ rằng nếu bạn đang sử dụng jquery để hiển thị bản sao bằng cách sử dụng onSlideBefore bạn đã đi quá xa, có thể là một bản sửa lỗi CSS tùy thuộc vào tình hình cụ thể của bạn. Đôi khi nó xuất phát từ một kích thước hình ảnh và/hoặc vấn đề kiểu hiển thị với BOOTSTRAP, vì vậy nếu bạn đang sử dụng BS, có một sửa chữa CSS cho chắc chắn. Nói chung, nếu tất cả các trang trình bày của bạn có cùng kích thước, hãy thử đặt chiều cao và chiều rộng, chiều cao và chiều rộng tối đa cũng như chiều cao và chiều rộng tối thiểu cho hình ảnh và nó có thể khắc phục được.

này là không cần thiết, nhưng nếu điều đó không làm việc, trong bxSlider tùy chọn init thử useCSS: false, ví dụ:

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

Answer 6

Như đã đề cập bởi OG Sean Nó rất lỗi của Chrome.

tôi HADE cùng một vấn đề và điều duy nhất cần thiết khi tôi đã cố gắng là mã CSS này:

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

Answer 7

Bạn chỉ cần để ngăn chặn vòng lặp:

infiniteLoop:false 

... và có không .bx-clone

http://bxslider.com/options

Answer 8

Làm việc với wa bxslider sai lầm lớn nhất của cuộc đời tôi.