Swiper slider does not swipe slides on mobile devices

问题

Can not fix some issue, I use swiper slider, everything is fine, nice slider, but there is one oroblem, when I am on desktop page version and swipe slider is ok, but when I turn on mobile emulator without reloading page swiper sliders does not swipe, but when I update the page it is ok slides are swiping, how can I fix it without page reloading please, here is code I use

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

回答1:

You could try the update function of the swiper when you resize the window ():

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

But the error: Uncaught ReferenceError: $ is not defined looks more like a JQuery error where you need to set $:

var $ = window.jQuery;

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

标签

javascript

jquery

html

css