jquery 滑动滑块无法在移动的设备上滑动幻灯片

ffvjumwh 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(110)

无法解决一些问题，我使用刷卡滑块，一切都很好，漂亮的滑块，但有一个oroblem，当我在桌面页面版本和刷卡滑块是好的，但当我打开移动的模拟器没有重新加载页面刷卡滑块不刷卡，但当我更新页面它是好的幻灯片刷卡，我怎么能修复它没有页面重新加载请，这里是我使用的代码

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
        }
      }
    });
  }

jquery

来源：https://stackoverflow.com/questions/58664931/swiper-slider-does-not-swipe-slides-on-mobile-devices

2条答案

按热度按时间

bybem2ql1#

你可以在调整窗口大小时尝试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错误，你需要设置$：