I am using a single custom.js file in the footer for all of my websites pages.

In this custom.js there is the code that initializes the SwiperJS slider which is on the home page.

var swiper = new Swiper(".slider-1", {
    loop: true,
});

Now, I load the SwiperJS library on only the home page since it is only required there. But this results in the following error in the rest of the pages which don't have the script attached.

Uncaught ReferenceError: Swiper is not defined

The same also happens with the GLightbox library since I load it only on the gallery page but its initialization code is in the custom.js file.

How do I check if the library exists before running the initialization code?

I am using a single custom.js file in the footer for all of my websites pages.

In this custom.js there is the code that initializes the SwiperJS slider which is on the home page.

var swiper = new Swiper(".slider-1", {
    loop: true,
});

Now, I load the SwiperJS library on only the home page since it is only required there. But this results in the following error in the rest of the pages which don't have the script attached.

Uncaught ReferenceError: Swiper is not defined

The same also happens with the GLightbox library since I load it only on the gallery page but its initialization code is in the custom.js file.

How do I check if the library exists before running the initialization code?

• javascript
• swiper.js

Share Improve this question Follow asked Sep 15, 2021 at 10:50 Vinith AlmeidaVinith Almeida 1,48133 gold badges1414 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

if (typeof Swiper !== 'undefined') {
  /* DO STUFF */
}

You can use try-catch

try {
  let swiper = new Swiper(".slider-1", {
    loop: true,
  });
}
catch (e) { /* console.log("no swiper") */ }

OR

const slider = document.querySelector(".slider-1");
if (slider) {
  let swiper = new Swiper(".slider-1", {
    loop: true,
  });
}