Creating a Easy Stunning React JS Carousel Coding Example with HTML and CSS Tasks

byLit Code 🔥 -

 

Step-by-Step: Creating a Stunning React JS Carousel Coding Example with HTML and CSS Tasks

Introduction In this article, we will explore the step-by-step process of creating a stunning React JS carousel coding example using HTML and CSS. We will delve into the basics of React JS carousel and discuss its history. We will also discuss the requirements for creating a stunning React JS carousel and the necessary software needed. Then, we will cover the setup before development, how to start creating the HTML markup, styling the carousel with CSS, customising carousel arrows and adding interactivity to the carousel with React JS. 

Understanding What a React JS Carousel is
A React JS carousel is a component that allows users to display and navigate through a series of images or other content. It is built using React JS, a JavaScript library that allows developers to create user interfaces. It represents a collection of images or other content that can be scrolled horizontally or vertically with arrows or using touch.

Lets begin Creating a Stunning React JS Carousel
Before starting with the development of React JS carousel, it’s essential that you have the necessary software and a basic knowledge of HTML and CSS. Download your favourite IDE like (VSCode, Notepad++, Sublime Text,etc.). Open up the IDE.

        

Before installing the react js project make sure you have installed the Node.js and npm. Open up cmd prompt or terminal and type the below commands one by one. now you see it will show the version if installed in you machine. if not you have to install both.

  • node --verision npm --version

            Download and install node js from official site: Download Node Js
            it will automatically install the npm.


Setting Up Project

installing the react project name: my-carousel-app 
npx create-react-app my-carousel-app cd my-carousel-app npm start


                     if you see this page then your react js project is created successfully. 

Installing Library for icons only 

For icons we use Bootstarp-Icons
npm install react-bootstarp-icons
Creating component folder inside the src folder
Create the file structure like this:
src :component (dir) -> Carousel (dir) |-> Carousel.js (file) |-> Carousel.css (file)
Working on Carousel.js
Importing file and libraries:
  • import React, { useState } from "react";
    import {
    ArrowRight,
    ArrowLeft,
    CurrencyDollar,
    PersonFill,
    Code,
    GraphUp,
    MarkdownFill,
    } from "react-bootstrap-icons";
    import './Carousel.css';
creating a global json object cardData for Carousel:


const cardData = [
{
id: 1,
title: "Marketing",
icon: (
<GraphUp
size={34}
fontWeight={"bold"}
color=""
backgroundColor={"white"}
/>
),
description: "23,000 jobs",
color: "#f3ab84",
bgcolor: "rgba(245, 184, 151, 0.34)",
},
{
id: 2,
title: "Finance",
icon: (
<CurrencyDollar
size={34}
fontWeight={"bold"}
color=""
backgroundColor={"white"}
/>
),
description: "237 jobs",
color: "#5ce5ced3",
bgcolor: "rgba(142, 236, 220, 0.34)",
},
{
id: 3,
title: "IT",
icon: (
<Code size={34} fontWeight={"bold"} color="" backgroundColor={"white"} />
),
description: "2000 jobs",
color: "#628ddde9",
bgcolor: "rgba(151, 184, 245, 0.34)",
},
{
id: 4,
title: "Education",
icon: (
<PersonFill
size={34}
fontWeight={"bold"}
color=""
backgroundColor={"white"}
/>
),
description: "24,000 jobs",
color: "#e773c4df",
bgcolor: "rgba(245, 151, 217, 0.34)",
},
{
id: 5,
title: "Crypto",
icon: (
<MarkdownFill
size={34}
fontWeight={"bold"}
color=""
backgroundColor={"white"}
/>
),
description: "200 jobs",
color: "#e17a7a",
bgcolor: "#ffd0d0",
},
// Add more card data objects as needed
// ...
];

  

  • Creating Carousel arrow function and adding div container. inside the div now we add left and right arrows and also the div container between the arrows where we will render the carousel cards.



const Carousel = () => {


return (
<div className="carousel-container">
<span onClick={slideLeft} className="slide-arrow carousel-btn">
<ArrowLeft />
</span>

<div className="carousel-container">{renderCards()}</div>

<span onClick={slideRight} className="slide-arrow carousel-btn">
<ArrowRight />
</span>
</div>
);
};

export default Carousel;

  • Now we will create a RenderCards function to get the cards and render on the screen. it will also make the right and left moving functionality:



const renderCards = () => {
const cards = [];
const startIndex = currentSlide;
const endIndex = (currentSlide + visibleCards) % totalSlides;

if (endIndex >= startIndex) {
for (let i = startIndex; i < endIndex; i++) {
cards.push(
<>
<div
key={cardData[i].id}
class="carousel card "
style={{ backgroundColor: cardData[i].bgcolor }}
>
<div
className="card-icon"
style={{
backgroundColor: cardData[i].color,
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
{cardData[i].icon}
</div>
<span className="card-title">{cardData[i].title}</span>{" "}
<p className="card-description"> {cardData[i].description}</p>
</div>
</>
);
}
} else {
for (let i = startIndex; i < totalSlides; i++) {
cards.push(
<>
<div
key={cardData[i].id}
class="carousel card "
style={{ backgroundColor: cardData[i].bgcolor }}
>
<div
className="card-icon"
style={{
backgroundColor: cardData[i].color,
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
{cardData[i].icon}{" "}
</div>
<span className="card-title">{cardData[i].title}</span>{" "}
<p className="card-description"> {cardData[i].description}</p>
</div>
</>
);
}
for (let i = 0; i < endIndex; i++) {
cards.push(
<>
<div
key={cardData[i].id}
class="carousel card "
style={{ backgroundColor: cardData[i].bgcolor }}
>
<div
className="card-icon"
style={{
backgroundColor: cardData[i].color,
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
{cardData[i].icon}{" "}
</div>
<span className="card-title">{cardData[i].title}</span>{" "}
<p className="card-description"> {cardData[i].description}</p>
</div>
</>
);
}
}

return cards;
};

  

  • Now adding state and slider functions to the code. make sure to add this inside the Carousel function.

  • const [currentSlide, setCurrentSlide] = useState(0);
    const totalSlides = cardData.length;
    const visibleCards = 4;

    const slideRight = () => {
    setCurrentSlide((prevSlide) => (prevSlide + 1) % totalSlides);
    };

    const slideLeft = () => {
    setCurrentSlide((prevSlide) => (prevSlide - 1 + totalSlides) % totalSlides);
    };


Thats it for the JS part now moving towards to the css part
Styling the Carousel with CSS

Creating the carousel container styles

  • .carousel-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
    padding: 0 20px; /* Adjust padding as needed */
    }

    .carousel {
    flex: 0 0 auto;
    margin: 0 8px; /* Adjust margin as needed */
    width: 230px;
    height: 230px;
    background-color: #f2f2f2;
    border-radius: 8px;
    }

    Styling Card, Card Icons, Card Content, Card Title, and Description:


  • .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 32px 13px;
    padding: 22px;
    width: 230px;
    height: 230px;
    background-color: #f2f2f2;
    border-radius: 8px;
    }
    .card-icon {
    width: 80px;
    height: 80px;
    background-color: #bdc0d6;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 110px 10px 0px 0px #a9a9a9;
    -webkit-box-shadow: 0 1px 22px #c9c9c9;
    }

    .card-content {
    text-align: center;
    }

    .card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    }

    .card-description {
    font-size: 16px;
    }

  • Now Styling the Carousel Arrows with hovering properties:

.carousel-btn {
color: #000;
font-size: 18px;
font-weight: bold;
padding: 10px 15px;
background-color: #e6e6e6b0;
border-radius: 50%;
}
.carousel-btn:hover {
color: #000;
background-color: #e6e6e6df;
cursor: pointer;
}

Now import the component in App.js and use it.

import Carousel from './components/Carousel/Carousel';
import './App.css';

function App() {
return (
<div className="App">
<h1>The Custom Carousel</h1>
<Carousel />
</div>
);
}

export default App;

That all we have todo. Now run and you will get the result:

Full Deployment of React JS Carousel Js and CSS

Full Js code here            


import React, { useState } from "react";
import {
ArrowRight,
ArrowLeft,
CurrencyDollar,
PersonFill,
Code,
GraphUp,
MarkdownFill,
} from "react-bootstrap-icons";
import "./Carousel.css";

const cardData = [
{
id: 1,
title: "Marketing",
icon: (
<GraphUp
size={34}
fontWeight={"bold"}
color=""
backgroundColor={"white"}
/>
),
description: "23,000 jobs",
color: "#f3ab84",
bgcolor: "rgba(245, 184, 151, 0.34)",
},
{
id: 2,
title: "Finance",
icon: (
<CurrencyDollar
size={34}
fontWeight={"bold"}
color=""
backgroundColor={"white"}
/>
),
description: "237 jobs",
color: "#5ce5ced3",
bgcolor: "rgba(142, 236, 220, 0.34)",
},
{
id: 3,
title: "IT",
icon: (
<Code size={34} fontWeight={"bold"} color="" backgroundColor={"white"} />
),
description: "2000 jobs",
color: "#628ddde9",
bgcolor: "rgba(151, 184, 245, 0.34)",
},
{
id: 4,
title: "Education",
icon: (
<PersonFill
size={34}
fontWeight={"bold"}
color=""
backgroundColor={"white"}
/>
),
description: "24,000 jobs",
color: "#e773c4df",
bgcolor: "rgba(245, 151, 217, 0.34)",
},
{
id: 5,
title: "Crypto",
icon: (
<MarkdownFill
size={34}
fontWeight={"bold"}
color=""
backgroundColor={"white"}
/>
),
description: "200 jobs",
color: "#e17a7a",
bgcolor: "#ffd0d0",
},
// Add more card data objects as needed
// ...
];

const Carousel = () => {
const [currentSlide, setCurrentSlide] = useState(0);
const totalSlides = cardData.length;
const visibleCards = 4;

const slideRight = () => {
setCurrentSlide((prevSlide) => (prevSlide + 1) % totalSlides);
};

const slideLeft = () => {
setCurrentSlide((prevSlide) => (prevSlide - 1 + totalSlides) % totalSlides);
};

const renderCards = () => {
const cards = [];
const startIndex = currentSlide;
const endIndex = (currentSlide + visibleCards) % totalSlides;

if (endIndex >= startIndex) {
for (let i = startIndex; i < endIndex; i++) {
cards.push(
<>
<div
key={cardData[i].id}
class="carousel card "
style={{ backgroundColor: cardData[i].bgcolor }}
>
<div
className="card-icon"
style={{
backgroundColor: cardData[i].color,
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
{cardData[i].icon}
</div>
<span className="card-title">{cardData[i].title}</span>{" "}
<p className="card-description"> {cardData[i].description}</p>
</div>
</>
);
}
} else {
for (let i = startIndex; i < totalSlides; i++) {
cards.push(
<>
<div
key={cardData[i].id}
class="carousel card "
style={{ backgroundColor: cardData[i].bgcolor }}
>
<div
className="card-icon"
style={{
backgroundColor: cardData[i].color,
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
{cardData[i].icon}{" "}
</div>
<span className="card-title">{cardData[i].title}</span>{" "}
<p className="card-description"> {cardData[i].description}</p>
</div>
</>
);
}
for (let i = 0; i < endIndex; i++) {
cards.push(
<>
<div
key={cardData[i].id}
class="carousel card "
style={{ backgroundColor: cardData[i].bgcolor }}
>
<div
className="card-icon"
style={{
backgroundColor: cardData[i].color,
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
{cardData[i].icon}{" "}
</div>
<span className="card-title">{cardData[i].title}</span>{" "}
<p className="card-description"> {cardData[i].description}</p>
</div>
</>
);
}
}

return cards;
};

return (
<div className="carousel-container">
<span onClick={slideLeft} className="slide-arrow carousel-btn">
<ArrowLeft />
</span>

<div className="carousel-container">{renderCards()}</div>

<span onClick={slideRight} className="slide-arrow carousel-btn">
<ArrowRight />
</span>
</div>
);
};

export default Carousel;


  • Full css code here

  • /* CarouselCards */

    .carousel-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
    padding: 0 20px; /* Adjust padding as needed */
    }

    .carousel {
    flex: 0 0 auto;
    margin: 0 8px; /* Adjust margin as needed */
    width: 230px;
    height: 230px;
    background-color: #f2f2f2;
    border-radius: 8px;
    }

    .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 32px 13px;
    padding: 22px;
    width: 230px;
    height: 230px;
    background-color: #f2f2f2;
    border-radius: 8px;
    }

    /* .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px;
    margin: 22px;
    height: 100%;
    border-radius: 8px;
    } */

    .card-icon {
    width: 80px;
    height: 80px;
    background-color: #bdc0d6;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 110px 10px 0px 0px #a9a9a9;
    -webkit-box-shadow: 0 1px 22px #c9c9c9;
    }

    .card-content {
    text-align: center;
    }

    .card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
    }

    .card-description {
    font-size: 16px;
    }
    .carousel-btn {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 15px;
    background-color: #e6e6e6b0;
    border-radius: 50%;
    }
    .carousel-btn:hover {
    color: #000;
    background-color: #e6e6e6df;
    cursor: pointer;
    }

    /* End of CarouselCards */

      Summary of the Article Creating a stunning React JS carousel is a complex but rewarding task. It requires a basic knowledge of HTML and CSS, as well as strong skills in React JS. In this article, we covered the step-by-step process of creating an east and interactive React JS carousel using HTML and CSS.

Get full project from Open Project on GitHub

FAQs

 What is a React JS Carousel?

A React JS carousel is a component that allows users to display and navigate through a series of images or other content. It is built using React JS, a JavaScript library that allows developers to create user interfaces

Can I integrate an API with my React JS Carousel?

Yes, you can integrate an API with your React JS carousel to fetch real-time data from a database or Web API.

Can I customize my React JS Carousel?

Yes, you can customize your React JS carousel by adding your style with CSS and modifying the JavaScript code to fit your desired functionality.

How can I debug the Carousel Components?

You can debug the carousel components and functionality using console.log() and by inspecting your code with Chrome Developer Tools, which allows you to identify and fix errors in the HTML, CSS, and JavaScript

Tags:

You might like

View all
Previous Post Next Post
Share to other apps
Copy Post Link