Swiper JS destroy() not firing

Question

I'm trying to disable Swiper JS (https://github.com/nolimits4web/swiper) on anything other than mobile using the destroy() function, but I get the error Uncaught TypeError: swiper.destroy is not a function.

I've tried various different things, but I can't get it to work.

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;

Answer 1

Did you try MySwiper.destroy(); instead of swiper.destroy();