Add Custom Java Script and swiper library in EDS

[mohamedvalith]

I am Trying to create module with swiper in EDS. HTML part i have done. But adding Custom Java script for the module and Swiper library is triggering error. Can anyone guide me how to add swiper and custom JS for my module in Edge Delivery service. 

[ShaileshBassi · Accepted solution]

Hi @mohamedvalith In EDS you can load any script, but the loading of the script will impact your Lighthouse if it is not loaded properly.

So, the ideal way to load the script will be withing the section i.e. loadDelayed, so that there is no blocking time for the LCP data.

Please refer to the github boilerplate https://github.com/adobe/aem-boilerplate/blob/main/scripts/scripts.js 

Thanks

[mohamedvalith]

Thank you ShaileshBassi. It is very helpful and your suggestion working fine.

[Jitender_RawatGu]

first you can direct put script to head or you can load that at a time of block load

const loadSwiper = () => {

  return new Promise((resolve) => {

    if (window.Swiper) {

      resolve(window.Swiper);

    } else {

      const swiperCss = document.createElement("link");

      swiperCss.rel = "stylesheet";

      swiperCss.href =

        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css";

      document.head.appendChild(swiperCss);

      const swiperScript = document.createElement("script");

      swiperScript.src =

        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js";

      swiperScript.onload = () => resolve(window.Swiper);

      document.head.appendChild(swiperScript);

    }

  });

};