title: Jquery - If greater than certain amount of px load this else load nothing and vice versa?
body: <p>Basically I have a script that checks browser resolution at 1200px. </p>
  
  <p>If the resolution is greater than 1200px it loads the slideshow code, but if it's less then 1200px resolution it does not load the code and then the CSS I have assigns a static background image. </p>
  
  <p>The issue I'm seeing, is if you load first less than 1200px you get the static image as wanted and then if you expand the window size above 1200px you get the slideshow also what I wanted, but if I go back below 1200px the slideshow continues to function. Is there a way to go back and forth loading and then unloading the slideshow code?  </p>
  
  <p>I'm thinking that someone with a tablet for example first views the site tall view first and then flips to landscape view and then flips back to tall view. When they flip back to tall view the slideshow would still be running. I hope this makes sense. </p>
  
  <p>Here is the jquery code I'm using, if anyone can help me figure this out it would be greatly appreciated. </p>
  
  <pre><code>$(document).ready(function () {
  
          var $window = $(window).on('load resize', function(){
              // Notice I've combined load and resize because I need this to work on load/refresh as well as on resize.
              var width = $window.width();
  
                  if (width &gt;= 1200) {
                      // If resolution is greater than or equal to 1200px it loads this code... 
                      $("body").vegas({
                              delay: 10000,
                              shuffle: true,
                              transition: 'zoomOut',
                              transitionDuration: 7000,
                              animation: 'random',
                              timer: false,
                              slides: [
                                  { src: "img/slides/001.jpg" },
                                  { src: "img/slides/002.jpg" },
                                  { src: "img/slides/003.jpg" },
                                  { src: "img/slides/004.jpg" },
                                  { src: "img/slides/005.jpg" },
                                  { src: "img/slides/006.jpg" },
                                  { src: "img/slides/007.jpg" },
                                  { src: "img/slides/008.jpg" },
                                  { src: "img/slides/009.jpg" },
                                  { src: "img/slides/010.jpg" },
                                  { src: "img/slides/011.jpg" }
                              ]
                          });
                  } else if (width &lt; 1200) {
                          // Else, nothing is loaded and a static image is set using CSS...
                          // Works when going from less than 1200 to more than 1200, but not vice versa.
                          // How do fix?
                  }
          });
  });
  </code></pre>