window resize with bxslider destroyed breaks style

Question

I'm trying to remove the styling and javascript of a bxslider element when the browser window shrinks to a certain size and apply a different style to the list, but it's doing weird things.

Scaling up from below 502px, everything looks and works fine, but when scaling back down again the slider disappears as it should but the new styling is broken. At the moment I just reload the page if it goes under 502px, which just feels horrible.

Here's my code:

EDIT: As requested, I've added the relevant HTML, javascript and CSS to a JSFiddle: http://jsfiddle.net/tYRJ2/2/. (The CSS isn't complete, but it shows the problem.)

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

Any help is much appreciated!

Answer 1

It would appear (and i've seen this problem before, in fact the solution I'm about to give came from me having this same problem with another image slider), the "destroy" command is not completely destroying the slider. In a case like this, an "easy" thing to do would be to save a back up clone of the slider ahead of time, then use it to replace your slider all together after destroy.

Example:

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

Also, as I mentioned before in comments. BXSlider creates divs it wraps around your UL. So if you want a completely different styling for when it's smaller, then simply wrap your UL in a div with an ID to start with, then write direct styling for that DIV > UL.

Example:

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