#what is the correct way to integrate the Sliders, Carousels, and Tablists in Next.js or React ?

4 messages · Page 1 of 1 (latest)

idle ridge
#

Problem:
I am developing a simple application using Next.js version 13.4. In this application, I have included sliders, carousels, and tablists using typical JavaScript <scripts> tag, similar to how we add libraries or plugins using <link> and <script> tags in HTML websites.

[Question: Is this the correct way to do things in React? like adding some sliders, carousels, and tablists etc using <script> tags within layout.js file in Next.js ]

If I add HTML tags in the layout.js file :

<html>
<body>{content}</body>
</html>
// Routing works fine / Page loads without reloading full page ✅
// React hooks like useState etc work fine ✅
// However, JavaScript sliders, carousels, and tablists do not work ❌

If I remove the HTML tags:

<body>{content}</body>
// Routing Doesn't work / Page fully reloads to go to another page ❌
// React hooks like useState etc Doesn't work. ❌
// But Js slider, carousel, and Tablist etc. Works Fine ✅

Note : All the jQuery, plugins, etc., which are used for sliders, carousels, and tablists, are directly inserted just before the closing </body> tag inside the layout.js file. These are typical <script> tags that we use in HTML to load plugins.

elfin krakenBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
open gorge
#

Use packages, es5 import

idle ridge