Initialize embla after certain width, and destroy below certain width

Hello, i have a problem with initializing Embla carousel after 992px and destroying it below that value.

My js code:

const initBrandsEmbla = () => {
  const brandsEmbla = document.querySelector('.embla__brands');

  if (brandsEmbla !== null) {
    const settings = {
      draggable: false,
      loop: true,
      align: 'start',
      startIndex: 1,
    };

    const embla = EmblaCarousel(brandsEmbla, settings);
    const autoPlayer = autoPlay(embla, 1000);

    const checkEmbla = () => {
      if (window.matchMedia('(max-width: 992px)').matches) {
        // I want to reinitialize it here
        // something like embla.recover() would be helpful
        autoPlayer.play();
      } else {
        embla.destroy();
      }
    }

    checkEmbla();

    // On embla resize, check the width and initialize carousel, or destroy it
    embla.on('resize', () => {
      checkEmbla();
    });
  }
}

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

The problem is: it works when i load the window that has width lower than 992, it also works as intended (the carousel stops) when i resize that window above 992px, but when i go back below 992px, the carousel doesn’t recover or reinitialize no matter what i do. I tried many things, but nothing worked so far.

When i try something like that:

const initBrandsEmbla = () => {
  const brandsEmbla = document.querySelector('.embla__brands');

  if (brandsEmbla !== null) {
    const settings = {
      draggable: false,
      loop: true,
      align: 'start',
      startIndex: 1,
    };

    let embla;
    let autoPlayer;

    const checkEmbla = () => {
      if (window.matchMedia('(max-width: 992px)').matches) {
        // I want to reinitialize it here
        embla = EmblaCarousel(brandsEmbla, settings);
        autoPlayer = autoPlay(embla, 1000).play();
      } else {
        embla.destroy();
      }
    }

    checkEmbla();

    // On embla resize, check the width and initialize carousel, or destroy it
    window.addEventListener('resize', () => {
      checkEmbla();
    });
  }
}

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

Then it doesn’t stop on the desktop, i’ve ran out of ideas 😕

Do you know the solution by any chance?

[davidjerleke]

Hi Jakub (@jakubreron),

Thank you for the CodeSandbox! The reason why the carousel wasn’t destroyed is because autoPlayer wasn’t correctly stored in a variable and stopped before destroying the Embla instance. I’ve added the following and it now works as intended:

if (window.innerWidth < 992) {
  if (embla === null) {
    embla = EmblaCarousel(brandsEmbla, settings);
    autoPlayer = autoPlay(embla, 1000); // Store autoPlayer in a variable
    autoPlayer.play();
  }
} else {
  if (embla !== null) {
    autoPlayer.stop(); // stop autoPlayer before destroying Embla
    embla.destroy();
    embla = null;
    autoPlayer = null;
  }
}

👉 Here’s a working example. I hope this helps.

Kindly, David

[jakubreron]

Thank You so much! You are a hero! 💪 I will recommend Embla carousel to everyone in my company! 😀