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