Swiper JS destroy()不触发

问题描述 投票:0回答:1

[我正在尝试使用https://github.com/nolimits4web/swiper功能在移动设备以外的任何其他设备上禁用Swiper JS(destroy()),但出现错误Uncaught TypeError: swiper.destroy is not a function

我尝试了各种不同的方法,但是无法正常工作。

import Swiper from 'swiper';

const ImageCarousel = $el => {
  let swiper = Swiper;
  let init = false;

  function swiperMode() {
    let mobile = window.matchMedia('(min-width: 0px) and (max-width: 768px)');
    let tablet = window.matchMedia('(min-width: 769px) and (max-width: 1024px)');
    let desktop = window.matchMedia('(min-width: 1025px)');

    // Enable (for mobile)
    if (mobile.matches) {
      if (!init) {
        init = true;
        const MySwiper = new Swiper('.swiper-container-cta', {
          direction: 'horizontal',
          loop: false,
          speed: 1000,
          grabCursor: true,
          watchSlidesProgress: false,
          mousewheelControl: true,
          keyboardControl: true,
          width: 280,
          spaceBetween: 16,
        });
      }
    }

    // Disable (for tablet)
    else if (tablet.matches) {
      swiper.destroy();
      init = false;
    }

    // Disable (for desktop)
    else if (desktop.matches) {
      swiper.destroy();
      init = false;
    }
  }

  // console.log(swiper);

  window.addEventListener('load', () => {
    swiperMode();
  });

  window.addEventListener('resize', () => {
    swiperMode();
  });
};

export default ImageCarousel;
javascript carousel responsive swiper swiperjs
1个回答
0
投票

我在这里有同样的问题!在页面加载时可以,但是在调整大小时不起作用!

© www.soinside.com 2019 - 2024. All rights reserved.