I am trying to write some javascript/jquery that will allow me to enable a slideshow plugin if the viewport width is greater than 767px.

If it is less than said value, it should simply display a background image in the body and disable the plugin

Currently i cannot get the plugin to display when the width is > 767px but the background image does show when less

any help would be appreciated

**CODE:**

```
$(window).on('resize', function() {
           if($(this).width() < 767) {
               $("body").addClass("backgroundImage");
               $("#example, body").vegas();
               window.location.reload();

           } else {
               $("body").removeClass("backgroundImage");
               $("#example, body").vegas({
            delay:10000,
            transition: 'fade',
            cover: true,
            align: 'center',
            valign: 'center',
            preload: true,
            preloadImage: true,
            slides: [
                {src: "img/slideshow/img1wB-E.jpg"},
                {src: "img/slideshow/img2-2.jpg"}
            ]
        });
               window.location.reload();
               return;

           }

        }).trigger('resize');

```