title: destroy iDangerous Swiper if window is resized to a bigger resolution or call it when resized to a smaller resolution
body: <p>i'm using <a href="http://www.idangero.us/sliders/swiper/" rel="noreferrer">iDangerous Swiper</a> for my website in lower resolutions. here is how i'm calling it:</p>
  
  <pre><code>var resolution = 670;
  if ($(window).width() &lt; resolution) {
  var mySwiper = $('.swiper-container').swiper({
      mode:'horizontal',
      loop: true,
      grabCursor: true,
      paginationClickable: true
  });
  </code></pre>
  
  <p>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 <code>resolution</code> or destroy it if the user accesses it in a small window size and then resizes it to bigger than <code>resolution</code>. i tried this, but it didn't work:</p>
  
  <pre><code>$(window).resize(function(){
      if ($(window).width() &lt; 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();
          }
      }
  });
  </code></pre>
  
  <p>two undesirable things happen:</p>
  
  <ol>
  <li>if the user is in a small resolution and resizes it to a resolution that still calls the swiper, it restarts the swiper.</li>
  <li>if the user is in a small resolution and resizes it to a bigger resolution, it is not destroyed.</li>
  </ol>
  
  <p>i thing my problem is the <code>typeof</code>. i don't know much how variables work when they are called like this: <code>$('.swiper-container').swiper()</code>.</p>
  
  <p>how do i "uncall" swiper and how not call it if it was already called?</p>