Add Custom Java Script and swiper library in EDS

Question

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 Answer

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

Jitender_RawatGu · Answer

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

}

});

};

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded