I already have a static website design, but now I'm converting it to Nuxt.js to make it more interactive. After running my Nuxt server with "npm run build...npm run start," the scripts load and my carousel/slides work fine. However, when I navigate to the next page using nuxt-link, the slides/carousel stop working. It seems like the issue is that the scripts are only loaded initially when served from the server.
In my nuxt.config.js file, I've included the JavaScript in the head tag following the API docs both globally and in my component, but the issue persists.
head: {
script: [
// external javascripts
{ src: 'js/jquery.min.js', body: true, async: true, defer: true },
{ src: 'js/bootstrap.min.js', body: true, async: true, defer: true },
{ src: 'js/wow.min.js', body: true, async: true, defer: true },
{ src: 'js/jquery.backTop.min.js', body: true, defer: true },
{ src: 'js/waypoints.min.js', body: true, async: true, defer: true },
{ src: 'js/waypoints-sticky.min.js', body: true, async: true, defer: true },
{ src: 'js/owl.carousel.min.js', body: true, async: true, defer: true },
{ src: 'js/jquery.stellar.min.js', body: true, async: true, defer: true },
{ src: 'js/jquery.counterup.min.js', body: true, async: true, defer: true },
{ src: 'js/venobox.min.js', body: true, async: true, defer: true },
{ src: 'js/custom-scripts.js', body: true, async: true, defer: true }
],
}
After researching online, I tried adding async: true and defer: true, but the problem remains unresolved.
The images below show screenshots of the testimonial carousel at page load and after navigating through nuxt-link: https://i.sstatic.net/Ruufq.png
https://i.sstatic.net/i8QYq.png
If anyone has any suggestions on how to fix this issue, please let me know. Thank you for your help.
PS: Reloading the entire page by refreshing the tab makes the slides work perfectly.