i'm using iDangerous Swiper for my website in lower resolutions. here is how i'm calling it:
var resolution = 670;
if ($(window).width() < resolution) {
var mySwiper = $('.swiper-container').swiper({
mode:'horizontal',
loop: true,
grabCursor: true,
paginationClickable: true
});
so, when you access it in a desktop browser, the swiper will not be called. what i want to do is to "turn it on" if the user resizes the window to a size smaller than resolution
or destroy it if the user accesses it in a small window size and then resizes it to bigger than resolution
. i tried this, but it didn't work:
$(window).resize(function(){
if ($(window).width() < resolution) {
if(typeof(mySwiper) === "undefined" ) {
var mySwiper = $('.swiper-container').swiper({
mode:'horizontal',
loop: true,
grabCursor: true,
paginationClickable: true
});
}
} else {
if (typeof(mySwiper) !== "undefined" ) {
mySwiper.destroy();
}
}
});
two undesirable things happen:
i thing my problem is the typeof
. i don't know much how variables work when they are called like this: $('.swiper-container').swiper()
.
how do i "uncall" swiper and how not call it if it was already called?
My solution:
var mySwiper = undefined;
function initSwiper() {
var screenWidth = $(window).width();
if(screenWidth < 992 && mySwiper == undefined) {
mySwiper = new Swiper('.swiper-container', {
spaceBetween: 0,
freeMode: true
});
} else if (screenWidth > 991 && mySwiper != undefined) {
mySwiper.destroy();
mySwiper = undefined;
jQuery('.swiper-wrapper').removeAttr('style');
jQuery('.swiper-slide').removeAttr('style');
}
}
//Swiper plugin initialization
initSwiper();
//Swiper plugin initialization on window resize
$(window).on('resize', function(){
initSwiper();
});
And it worx! :)