what is the correct way to integrate the Sliders, Carousels, and Tablists in Next.js or React ?
Answered
Sussex Spaniel posted this in #help-forum
Sussex SpanielOP
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 :
If I remove the HTML tags:
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.
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.
2 Replies
Use packages, es5 import
Answer
@Klaas Use packages, es5 import
Sussex SpanielOP
Thanks man!