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!