javascript - 如果宽度大于 767px 是否启用插件？

Question

我正在尝试编写一些 javascript/jquery，以便在视口(viewport)宽度大于 767 像素时启用幻灯片插件。

如果它小于所述值，它应该简单地在正文中显示背景图像并禁用插件

目前我无法让插件在宽度 > 767px 时显示，但当宽度小于 767px 时背景图像会显示

任何帮助将不胜感激

代码:

$(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');

Answer 1

为什么不创建一个最小宽度为 767 的 CSS 条目，这样如果它低于这个值，它就不会显示。

@media (min-width: 767px) {
    .specialSlideshow {
      width: 750px; } 
    }
@media (min-width: 0px) {
    .specialSlideshow {
      display:none; } 
    }

因此，您可能会在幻灯片放映代码周围包装一个类为 specialSlideshow 的 div，如果它低于 767 像素，它将不会显示。