Question

无法解决某些问题，我使用了swiper滑块，一切都很好，不错的滑块，但是当我使用桌面页面版本并且滑动滑块正常时，还是有一个障碍，但是当我打开移动模拟器而不重新加载页面时swiper滑块不会滑动，但是当我更新页面时可以滑动滑块，请问如何在不重新加载页面的情况下进行修复，这是我使用的代码

 if ($('.swiper-container').length) {
    let mySwiper = new Swiper('.swiper-container', {
      loop: false,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        300: {
          mousewheel: true,
          keyboard: true,
          slidesPerView: 1,
          spaceBetween: 24,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        400: {
          slidesPerView: 1,
          spaceBetween: 24,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 30,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 56,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        960: {
          slidesPerView: 2,
          spaceBetween: 56,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        991: {
          slidesPerView: 3,
          spaceBetween: 28,
          allowSlidePrev: false,
          allowSlideNext: false
        }
      }
    });
  }

Answer 1

您可以在调整窗口（）大小时尝试使用swiper的更新功能：

 if ($('.swiper-container').length) {
    let mySwiper = new Swiper('.swiper-container', {
      loop: false,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        300: {
          mousewheel: true,
          keyboard: true,
          slidesPerView: 1,
          spaceBetween: 24,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        400: {
          slidesPerView: 1,
          spaceBetween: 24,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 30,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 56,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        960: {
          slidesPerView: 2,
          spaceBetween: 56,
          allowSlidePrev: true,
          allowSlideNext: true
        },
        991: {
          slidesPerView: 3,
          spaceBetween: 28,
          allowSlidePrev: false,
          allowSlideNext: false
        }
      }
    });
    //Reload swiper
    $(window).resize(function(){
     mySwiper.update();
    });
    $(window).on('load', function () {
     mySwiper.update();
    });
  }

但是错误：Uncaught ReferenceError: $ is not defined看起来更像是一个JQuery错误，您需要在其中设置$：

var $ = window.jQuery;

滑动滑块不会在移动设备上滑动幻灯片

1 个答案: