最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - How to check if SwiperJS is available for use on a page? - Stack Overflow

matteradmin6PV0评论

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?

Share Improve this question asked Sep 15, 2021 at 10:50 Vinith AlmeidaVinith Almeida 1,4813 gold badges14 silver badges35 bronze badges
Add a ment  | 

2 Answers 2

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

Post a comment

comment list (0)

  1. No comments so far