Scripts are not loading after the page transition in Barba.jS

[Nazz-tech]

I have created a minimal demo and you can see that the inner page is not loading the JS and CSS of Locomotive and also OWL carousel if click on heading text on the homepage and navigate to inner. But if refresh the page then both locomotive & owl carousel are working fine on the inner page. How to fix this? I have added the suggested change to the JS file (https://bootstrap-awesome.com/barba-test1f/js/main-test.js)

Demo Link: https://bootstrap-awesome.com/barba-test1f/index-test.html

I tried the below code to inject JS files to the inner page via https://bootstrap-awesome.com/barba-test1f/js/main-test.js

barba.init({
views: [{
namespace: 'home',
beforeEnter({ next }) {
let pageScriptSrcs = [
'https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js',
'js/custom-scroll.js',
'js/owl/owl.carousel.js',
'js/owl/owl-custom.js'
]
pageScriptSrcs.forEach(scriptSrc => {
let script = '<script src="' + scriptSrc + '"></script>';
console.log(script);
next.container.appendChild(script);
})
},
}],
});

[xavierfoucrier]

Hi @Nazz-tech,

As explained in the third party script documentation section:

Using Barba means that your site is going to behave like a SPA (Single Page Application), so all your inline scripts will be executed once, and they won’t be executed after a page change done through Barba.

Your scripts will be loaded once, so you don't have to add them again when navigating to another page: just put them at the bottom of the body, they will be loaded when your site load and stay loaded in memory until your force-refresh the whole page.

Next, what you need is to "refresh" or "update" some of your components, like LocomotiveScroll or OWL for the carrousel. There are many ways of doing that with Barba: Global Hooks (run for all pages), Views (run on specific namespaces), Transitions (not recommended, because it's better to have your site logic separated from your animations/transitions). Choose what's the more relevant for you, then you just have to put inside your updates, like locomotive.update() or swiperjs.init() to refresh/update/init components against the next page content.

I suggest you to switch to SwiperJS, because OWL is outdated and unsupported now.

Carefully read the documentation, there is everything inside 😉

If you need further help, please use the Slack workspace in order to ask the whole community for support. Join using the invite link here: https://barba.js.org/docs/getstarted/useful-links/#Developer.