Change the class in a div based on window size (jQuery/JS)

Question

I want to change the class of my list based on the window size.

This is my div at the moment:

<div>
    <ul id="image-holder" class="list-inline acc-list">
        <li><img src="" /></li>
    </ul>
</div>

When the screen is resized to a small size (ie mobile/tablet) I would like it to change the div to the following:

<div>
    <ul id="image-holder" class="imageslider">
        <li><img src="" /></li>
    </ul>
</div>

I have tried the following JavaScript so far:

$(document).ready(function(){   

    var $window = $(window);

    // Function to handle changes to style classes based on window width
    function checkWidth() {
        if ($window.width() < 980) {
            $('#image-holder').removeClass('acc-list').removeClass('list-inline').addClass('bxslider');
        };

        if ($window.width() >= 980) {
            $('#image-holder').removeClass('bxslider').addClass('acc-list').addClass('list-inline');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);

    $('.imageslider').imageSlider({
        slideWidth: 188,
        slideHeight: 188,
        slideMargin: 0,
        auto: true
    });
});

This works if the window is ALREADY at a certain size, but upon resizing it doesn't successfully change between the imageslider being active and inactive.

Chrome Inspector:

<ul id="image-holder" class="acc-list list-inline" style="-webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(100px, 0px, 0px);">
    <li style="width: 100px;">
        <img src="img/image1.png" alt="">
        <div class="acc-desc-container">
            <p class="desc">blablabla</p>
            <p class="price">blablalba</p>
        </div>
    </li>

Answer 1

It's going to be something like this, starting in your document.ready:

after

var $window = $(window);

add:

var rslider;
function createSlider() {
    rslider = $('.bxslider').bxSlider({
    slideWidth: 188,
    slideHeight: 188,
    slideMargin: 0,
    auto: true
        });
};

and then change your checkWidth() function to something like:

function checkWidth() {
    if ($window.width() < 980) {
        $('#image-holder').addClass('bxslider');            
        if ($('#image-holder').hasClass('acc-list') && $('#image-holder').hasClass('list-inline') && $('#image-holder').hasClass('bxslider')) {
            createSlider();}
       $('#image-holder').removeClass('acc-list').removeClass('list-inline');
    };

    if ($window.width() >= 980) {
        if ($('#image-holder').hasClass('bxslider')) {
            rslider.destroySlider();}
        $('#image-holder').removeClass('bxslider').addClass('acc-list').addClass('list-inline');
   }
}

This will add (once), and then destroy(once) the slider as the screen moves. It creates a global rslider variable to store the slider in, and I removed the .imageSlider , since it did not match the rest of the code, and since you already call checkWidth() to create the slider.

Here's a fiddle with bxslider 4.12