React JS Next.JS Carousel Slider Code Download Free | React JS Product Slider Example | Next.js Product Slider

React JS Next.js Carousel Slider Code Expalanation

If you are in search of React Js Carsousel or React JS Product Slider, this is a ready made best option for you. This can be used in Next.js as well

The Demo:

Instructions

First install dependency using command npm i react-owl-carousel

You can get the code for below:

Create a folder Component and create Slider.js file and place below code on it

        
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
let productsp = [
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
{
id: 1,
name: "Product Number 1",
brand: "Brand Name",
url: "products-number-1",
price: 100,
},
];
var $ = require("jquery");
if (typeof window !== "undefined") {
window.$ = window.jQuery = require("jquery");
}

// This is for Next.js. On Rect JS remove this line
const OwlCarousel = dynamic(() => import("react-owl-carousel"), {
ssr: false,
});

// This is for React JS, Remove this for Next.js
// import OwlCarousel from 'react-owl-carousel';

const Slider = () => {
const options = {
margin: 30,
responsiveClass: true,
nav: true,
dots: true,
autoplay: false,
smartSpeed: 1000,
navClass: ["owl-prev", "owl-next"],
navText: [
'',
'',
],
responsive: {
0: {
items: 1,
},
400: {
items: 1,
},
600: {
items: 2,
},
700: {
items: 3,
},
1000: {
items: 4,
},
},
};

return (
<div className="row no-gutters">
<div
className="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-3 pb-2 bg-white"
id="owl-carousel-products"
>
<h3 className="text-center">
<span className="heading float-left w-100">Featured Products</span>
</h3>
<ul id="owl-carousel-ul" className="owl-carousel owl-loaded owl-drag">
<OwlCarousel
className="owl-theme"
loop
margin={4}
nav={true}
navText={[
'<img src="/images/Arrow_left.png" />',
'<img src="/images/Arrow_right.png" />',
]}
dots={false}
animateIn={true}
{...options}
>
{productsp && productsp.length > 0
? productsp.map((product) => {
return (
<div
id="featuredProducts"
className="item float-left w-100"
key={product.name}
>
<div className="productListing col-lg-5th col-md-4 col-sm-6 col-xs-12">
<a href={product.url}>
<a className="product float-left">
<span className="image text-center">
<img
id={"img" + product.id}
src="images/product.jpg"
alt={product.name}
title={product.name}
/>
</span>
<span className="w-100 text-center mt-1 ">
<h5 className="brand text-capitalize float-left">
{product.brand}
</h5>
<span className="name">{product.name}</span>
<strong className="itemPrice p-0">
Price: {product.price}
</strong>
</span>
</a>
</a>
</div>
</div>
);
})
: ""}
</OwlCarousel>
</ul>
</div>
</div>;
);
};
export default Slider;
        
        

Create a file index.js and place below code

        
            import React from "react";
import Slider from "../components/Slider";

export default function Home() {
  return (
    <div className="continer-fluid">
    <Slider />
    </div>
  );
}

        
        

Create a file format.css and place below css

                        
        body {
        background: #eee;
        padding: 0;
        margin: 0;
        }
        
        #wrapper {
        padding: 5%;
        margin: 0 auto;
        }
        
        /* CSS Simple Pre Code */
        pre {
        background: #333;
        white-space: pre;
        word-wrap: break-word;
        overflow: auto;
        }
        
        pre.code {
        margin: 20px 25px;
        border-radius: 4px;
        border: 1px solid #292929;
        position: relative;
        }
        
        pre.code label {
        font-family: sans-serif;
        font-weight: bold;
        font-size: 13px;
        color: #ddd;
        position: absolute;
        left: 1px;
        top: 15px;
        text-align: center;
        width: 60px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        pointer-events: none;
        }
        
        pre.code code {
        font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier,
        monospace;
        display: block;
        margin: 0 0 0 60px;
        padding: 15px 16px 14px;
        border-left: 1px solid #555;
        overflow-x: auto;
        font-size: 13px;
        line-height: 19px;
        color: #ddd;
        }
        
        pre::after {
        content: "double click to selection";
        padding: 0;
        width: auto;
        height: auto;
        position: absolute;
        right: 18px;
        top: 14px;
        font-size: 12px;
        color: #ddd;
        line-height: 20px;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        transition: all 0.3s ease;
        }
        
        pre:hover::after {
        opacity: 0;
        visibility: visible;
        }
        
        pre.code-css code {
        color: #91a7ff;
        }
        
        pre.code-html code {
        color: #aed581;
        }
        
        pre.code-javascript code {
        color: #ffa726;
        }
        
        pre.code-jquery code {
        color: #4dd0e1;
        }
                        
                        

Download Full code from here:

How to run Full Code

1. Extract code and open on Editor like VS Code
2. Open the terminal and run the command npm install
3. For React JS , Run Command npm start to Start Project
4. For Next JS , Run Command npm run dev to Start Project