ridimensionamento finestra con bxslider interruzioni distrutte stile

Question

Sto cercando di rimuovere lo stile e il javascript di un elemento bxslider quando la finestra del browser si riduce a una certa dimensione e applica uno stile diverso all'elenco, ma sta facendo cose strane.

Scalare da sotto il 502px, tutto sembra funzionante, ma quando ridiscendi il cursore scompare come dovrebbe, ma il nuovo stile è rotto. Al momento ricarico la pagina solo se scende sotto 502px, il che è semplicemente orribile.

Ecco il mio codice:

EDIT: Come richiesto, ho aggiunto il relativo codice HTML, JavaScript e CSS per un JSFiddle: http://jsfiddle.net/tYRJ2/2/. (Il CSS non è completo, ma mostra il problema.)

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

Qualsiasi aiuto è molto apprezzato!

Answer 1

Sembrerebbe (e ho già visto questo problema prima, in effetti la soluzione che sto per dare è venuta da me avendo questo stesso problema con un altro cursore di immagine), il comando "distruggi" non sta distruggendo completamente il slider. In un caso come questo, una cosa "facile" da fare sarebbe quella di salvare un clone di backup del cursore prima del tempo, quindi usarlo per sostituire il cursore tutto insieme dopo la distruzione.

Esempio:

//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 

Inoltre, come ho detto prima nei commenti. BXSlider crea div che avvolge il tuo UL. Quindi, se si desidera uno stile completamente diverso per quando è più piccolo, basta semplicemente avvolgere UL in un div con un ID per iniziare, quindi scrivere lo stile diretto per quel DIV> UL.

Esempio:

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