I've implemented Tiny Slider in my Next.js app which requires an inline script on the page to control the slider's behavior. Now while the script loads properly the first time I launch index.js, however whenever I navigate to another page using Link and come back to index.js, the script doesn't load.
Here's how I've written the script in index.js
{/* Script */}
<Script id='tester'>
{`
var slider = tns({
container: '.my-slider',
items: 6,
autoplay: true,
autoplayTimeout: 2000,
gutter: 20,
autoplayButtonOutput: false,
controls: false,
navPosition: 'bottom',
nav: false,
mouseDrag: true,
arrowKeys: true,
responsive: {
300: {
items: 2,
gutter: 50,
center: true,
fixedWidth: 250,
},
700: {
items: 3,
gutter: 50,
center: true,
fixedWidth: 250,
},
1440: {
items: 3,
gutter: 50,
fixedWidth: 250,
center: true,
}
}
});
`}
</Script>
I need the script to load every time index.js loads, not just the first time around. Any ideas on how I can do this? The entire code is here - https://github.com/YaddyVirus/Esttheva
from Next.js inline script only loads once
No comments:
Post a Comment