thay đổi kích thước cửa sổ bằng kiểu bxslider phá vỡ kiểu

Question

Tôi đang cố gắng xóa kiểu dáng và javascript của phần tử bxslider khi cửa sổ trình duyệt co lại thành một kích thước nhất định và áp dụng một kiểu khác cho danh sách, nhưng nó đang làm những điều kỳ lạ.

Mở rộng quy mô từ dưới 502px, mọi thứ trông đẹp và hoạt động tốt, nhưng khi thu nhỏ lại, thanh trượt sẽ biến mất, nhưng kiểu dáng mới bị hỏng. Tại thời điểm này tôi chỉ cần tải lại trang nếu nó đi dưới 502px, mà chỉ cảm thấy khủng khiếp.

Dưới đây là mã của tôi:

EDIT: Theo yêu cầu, tôi đã thêm mã HTML có liên quan, javascript và CSS để một JSFiddle: http://jsfiddle.net/tYRJ2/2/. (CSS chưa hoàn chỉnh, nhưng nó hiển thị vấn đề.)

var sliderActive = false; 
var slider; 

function createSlider() { 
    slider = jQuery('.bxslider').bxSlider({ 
     adaptiveHeight: false, 
     swipeThreshold: 40, 
     controls: true, 
     auto: true, 
     pause: 6000, 
     autoHover: true, 
     }); 
     return true; 
} 

//create slider if new page is wide 
jQuery(document).ready(function(){ 
    if (window.innerWidth > 502) { 
     sliderActive = createSlider(); 
    } 
}); 

//create/destroy slider based on width 
jQuery(window).resize(function() { 

    //if wide and no slider, create slider 
    if (window.innerWidth > 502 && sliderActive == false) { 
     sliderActive = createSlider(); 
    } 

    //else if narrow and active slider, destroy slider 
    else if (window.innerWidth <= 502 && sliderActive == true){ 
     slider.destroySlider(); 
     sliderActive = false; 
     location.reload(); //fudgey 
    } 
    //else if wide and active slider, or narrow and no slider, do nothing 
}); 

Bất kỳ trợ giúp nào được đánh giá cao!

Answer 1

Nó sẽ xuất hiện (và tôi đã thấy vấn đề này trước đây, trên thực tế giải pháp mà tôi sắp đưa ra từ tôi có vấn đề tương tự với thanh trượt hình ảnh khác), lệnh "hủy" không hoàn toàn phá hủy thanh trượt. Trong một trường hợp như thế này, một điều "dễ dàng" để làm là tiết kiệm một bản sao lưu của thanh trượt trước thời hạn, sau đó sử dụng nó để thay thế thanh trượt của bạn tất cả cùng nhau sau khi tiêu diệt.

Ví dụ:

//create slider if page is wide 
jQuery(document).ready(function(){ 
    sliderClone = jQuery('.bxslider').clone(); // here we create our clone to hold on to original HTML 
    if (window.innerWidth > 502) { 
...... some time later ................. 
    sliderActive = false; 
    slider.replaceWith(sliderClone.clone()); // here i replace the "tampered" HTML with a clone of the "original" that we cloned off for safe keeping earlier 

Ngoài ra, như tôi đã đề cập trước đây trong ý kiến. BXSlider tạo ra divs nó kết thúc tốt đẹp xung quanh UL của bạn. Vì vậy, nếu bạn muốn có một phong cách hoàn toàn khác cho khi nó nhỏ hơn, sau đó chỉ cần bọc UL của bạn trong một div với một ID để bắt đầu, sau đó viết phong cách trực tiếp cho DIV> UL đó.

Ví dụ:

HTML

<div id="myBXSlider"> 
    <ul class="bxslider"> 
     <li> 
      ...... 

CSS

// the following first applies to the "slider" when active, 
// using bx-slider's class structure 
.bx-viewport { 
    margin: 0; 
} 

.bx-viewport h2 { 
    margin-top: 1em; 
} 

.bx-viewport li { 
    list-style: none; 
    padding: 0 1em; 
    margin: 1%; 
    background-color: #eee; 
    -moz-box-shadow: 0 0 10px #bbb; 
    -webkit-box-shadow: 0 0 10px #bbb; 
    box-shadow: 0 0 10px #bbb; 
    border: solid #919396 2px; 
} 
// now for custom styling for when it's just our div then list 
#myBXSlider > ul { 
    display: block; 
    margin: 0 auto; 
} 
#myBXSlider > ul li { 
    background: #FFA; 
    color: #F00; 
    padding: .5em 1em; 
} 
#myBXSlider > ul h2 { 
    font-style: italic; 
} 
// etc... etc ..... and so on