Destroy iDangerous Swiper if the window is resized to a higher resolution or invoked when resized to a lower resolution

Question

I use iDangerous Swiper for my site in lower resolutions. this is what i call it:

var resolution = 670; if ($(window).width() < resolution) { var mySwiper = $('.swiper-container').swiper({ mode:'horizontal', loop: true, grabCursor: true, paginationClickable: true }); 

therefore, when you access it in your desktop browser, swiper will not be called. what I want to do is “enable” if the user resizes the window to a size smaller than resolution or destroys it if the user accesses it in a small window size and then resizes it to more than resolution . I tried this, but this did not 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:

• If the user is in a small resolution and resizes to a resolution that still calls swiper, he restarts swiper.
• If the user is in a small resolution and resizes to a higher resolution, he will not be destroyed.

i my problem is typeof . I don’t know how variables work when they are called like this: $('.swiper-container').swiper() .

how can I hide "swall" and how not to name it if it has already been called?

Answer 1

My decision:

 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 this is important! :)

Answer 2

I had the same problem, and I found that as soon as the width exceeded the maximum width, mySwiper was again undefined , and therefore the if(typeof) always returned false .

I found another hybrid solution with the fired[] array below, and also realized that although the destroy() method could be executed in my example, swiper itself added a style attribute to the shell and moved the DIVs that were saved after the destroy method was called and only left with page refresh. After I added that the removeAttr() method calls two DIVs, everything worked as expected.

Your mileage may vary.

 $(window).on('resize', function () { if ($(this).width() <= 383 && !fired[0]) { fired[0] = true; fired[1] = false; mySwiper = $('.swiper-container').swiper({ mode: 'horizontal', loop: false, wrapperClass: 'swiper-wrapper', slideClass: 'swiper-slide' }); } else if ($(this).width() >= 384 && !fired[1]) { fired[0] = false; fired[1] = true; mySwiper.destroy(); $('.swiper-wrapper').removeAttr('style'); $('.swiper-slide').removeAttr('style'); } }); 

Answer 3

For those who still have problems killing and initializing Swiper on demand, try calling reInit () with a slight delay.

detect swiper link on page load

 var mySwiper; 

Run swiper

 // Set Slider mySwiper = new Swiper ('.swiper-container', {loop: true }); // Run Update after 500ms setTimeout(function() { mySwiper.reInit(); },500); 

Referee

  if (typeof mySwiper != 'undefined') { mySwiper.destroy(); mySwiper = undefined; } 

If your update markup via ajax ensures that you clear the container first. i.e:

  if (typeof mySwiper != 'undefined') { mySwiper.destroy(); mySwiper = undefined; } $('#container-with-swiper-markup').html(""); 

Answer 4

I had the same problem and came up with a similar solution:

init function:

 var mySwiper; 

my resize function:

 if(jQuery(window).width() < 672) { if (typeof mySwiper == 'undefined') { mySwiper = new Swiper('#myId', { calculateHeight: true }); } } else { if (typeof mySwiper != 'undefined') { // destroy and delete swiper object mySwiper.destroy(); mySwiper = undefined; // reset styling for wrapper and slides jQuery('.swiper-wrapper').removeAttr('style'); jQuery('.swiper-slide').removeAttr('style'); } } 

Answer 5

Ok, so I know I'm late for the party, but I had similar problems, and in the end I found a solution that works solidly.

History : Swiper should run on the desktop, but not on mobile devices (small screens) and should be able to change between them when resizing.

Requirements . In my example, I use jQuery, Swiper and Modernizr (for media queries, since the width of the window, etc. is unreliable).

Javascript

 /*! Michael Pumo - Web Development. http://michaelpumo.com */ (function($, Modernizr) { 'use strict'; var state = { swiper: false, setOrGetDevice: function(device) { if (typeof(device) === 'undefined') { var mq = Modernizr.mq('only screen and (min-width: 768px)') ? 'desktop' : 'mobile'; device = mq; } return device; }, device: function() { return state.setOrGetDevice(); } }; var cache = { $window: $(window), $swiper: $('.swiper-container'), $swiperElements: $('.swiper-container, .swiper-wrapper, .swiper-slide') }; var swiper; var app = { init: function() { app.swiper(); }, swiper: function() { if(state.device() === 'desktop' && !state.swiper) { swiper = cache.$swiper.swiper({ parallax: false, initialSlide: 0, direction: 'horizontal', loop: true, autoplay: 3000, speed: 1000 }); state.swiper = true; } else if(state.device() === 'mobile' && state.swiper) { swiper.destroy(); swiper = undefined; cache.$swiperElements.removeAttr('style'); state.swiper = false; } } }; $(function() { app.init(); }); cache.$window.on('resize', function() { var mq = Modernizr.mq('only screen and (min-width: 768px)') ? 'desktop' : 'mobile'; state.setOrGetDevice(mq); app.init(); }); })(window.jQuery, window.Modernizr); 

In addition to checking the “device” (in other words, the size of the mobile phone or desktop), it checks the flag set in state.swiper . Since this is a mobile approach, this flag is initially set to false .

I know that my explanation is short-lived, but it works 100% and has the advantage of not initializing Swiper at every stage of resizing, thanks to the flags.

HTML will be just the standard HTML that Swiper requires, so you should use it if you intend to use this solution.

Hope this can help someone.

Thanks, Mikey.

Answer 6

I have the best solution given by http://idangero.us

 var mySwiper = new Swiper('.swiper-container', { // Optional parameters direction: 'vertical', loop: true }) if (window.innerWidth > 767) { swiper.detachEvents(); }