hot to turn on/off a jquery call according to browser width

Question

i have a responsive website based on Wordpress and i'd like to call Swiper according to browser window width. so i wrote this:

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

it works well, but if the user resizes the window, the website gets a little messy.

so, i wrote it all insite a $(window).resize. it worked, but two undesired things happened:

1. when the user starts the browser at < browserwidth and resizes the window up to browserwidth, it keeps reloading Swiper, what it's just not that cool.
2. when the user starts the browser at < browserwidth and resizes the window beyond browserwidth, Swiper is not "turned off", even if i use the existing mySwiper.destroy() function.

so, how can i turn on/off a jQuery call or detect it was called and destroy it?

Answer 1

Create a function that only fires once when the image goes over / under the given width, and create and destroy the swiper accordingly

jQuery(function($) {
    var fired = [false, false],
        mySwiper;

    $(window).on('resize', function() {
        if ( $(this).width() > 670 && !fired[0]) {
            fired[0] = true;
            fired[1] = false;
            mySwiper = $('.swiper-container').swiper({
                mode:'horizontal',
                loop: true,
                grabCursor: true,
                paginationClickable: true
            });
        }else if ($(this).width() < 670 && !fired[1]) {
            fired[0] = false;
            fired[1] = true;
            mySwiper.destroy();
        }
    });
});

Answer 2

Just make the width of the swiper-container be percentage based and the plugin will pick it up and react on its own..

You might have to add the option calculateHeight:true

Answer 3

The documentation shows there is a resizeReInit option, that will automatically reinitialize the slider on $(window).resize. You can probably use this, instead of writing your own resize event.

In looking through the documentation, it doesn't look like it supports any sort of disabling or destroying, which is very odd. You might have to manually hide/delete and show/create when the browser width doesn't meet the requirements.

Answer 4

The solution is to check if the swiper typeof is or not undefined.

// SWIPER
  var mySwiper;
  var browserwidth = 670;
  $(window).on('resize', function() {
    if ($(window).width() < browserwidth) {
      if (typeof mySwiper == 'undefined') {
        mySwiper = $('.swiper-container').swiper({
          mode:'horizontal',
          loop: true,
          grabCursor: true,
          paginationClickable: true
        });
      }
    }else ($(window).width() >= browserwidth) {
      if (typeof mySwiper != 'undefined') {
        // destroy and delete swiper object
        mySwiper.destroy();
        mySwiper = undefined;
        // reset styling for wrapper and slides
       $('.swiper-wrapper').removeAttr('style');
        $('.swiper-slide').removeAttr('style');
      }
    }
  })