4

I'm trying to responsively convert a list of images into a carousel. I am using the swipe.js (swipejs.com) libary as it's performs perfectly.

I want the carousel to be initiated when the body width reaches less than 540px but reversly if the window is resized to a body width that is greater than 540px this is reverted.

$(window).resize(function() {
    var bodyWidth = $('body').width();
    if(bodyWidth < 540){
        loadCarousel();
    }else if(bodyWidth > 540) {
        unLoadCarousel();
    }
});

function loadCarousel() {
        window.deviceSwipe = new Swipe(
            document.getElementById('device-slider')
        );
}

function unLoadCarousel() {

}

Now this is close to how I want it (I believe), my real question is, how do I unload(disable?) this carousel and remove the inline styles swipe.js includes?

I can use the following line to remove the styles but this seems like a bit of a bodge job.

$('#slider-container li, #slider-container ul, #device-slider').attr('style', '')

This also doesn't stop swipe.js from just re-applying the styles on window resize (even if the bodyWidth is greater than 540px for some reason).

Any help would be greatly appreciated!

4

1 回答 1

2

您可以使用名为 kill 的方法作为 deviceSwipe.kill()

于 2013-04-04T04:29:07.103 回答