Friday, 17 June 2022

Next.js inline script only loads once

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