Creating React Carousel

Summary

At the end, we should be create a working carousel(or slider) with buttons and caption

Prerequisite

A good knowledge of JavaScript and concepts like Arrays, Loops, Iteration and Ternary Operator(or If Statements) and also a little knowledge of how React works.

Let's get to work

First, you need to create a react app, by using the command npx create-react-app react-carousel or yarn add create-react-app react-carousel in your terminal. Then go into the folder by using the command cd react-carousel. After that, run the command code ., this will open the folder in VS Code or you can simply open your text editor and open the folder from there. Rid the template of unneeded files, you don't need the highlighted files. lean out.jpg Then create a components folder in your src folder. We are going to create the carousel data in a separate file and import it to keep out code clean. So, inside the components folder, create the files Carousel.js and CarouselData.js, like so: Inside CarouselData.js, write the following code to create an array of objects which will house the image source, caption and id. The export keyword let's the data become available globally.

export const CarouselData = [
{
        image: "https://images.unsplash.com/photo-1635350986268-8fe723dd880b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80",
        text: "First Slide",
        id: 1
    },
    {
        image: "https://images.unsplash.com/photo-1609097989789-ec30a60879aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=426&q=80",
        text: "Second Slide",
        id: 2
    },
    {
        image: "https://images.unsplash.com/photo-1613381272025-4172b310ece4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80",
        text: "Third Slide",
        id: 3
    },
    {
        image: "https://images.unsplash.com/photo-1632085847101-028ec1b2abeb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=327&q=80",
        text: "Fourth Slide",
        id: 4
    },
    {
        image: "https://images.unsplash.com/photo-1635729788533-39c81a472550?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80",
        text: "Last Slide",
        id: 5
    }
]

Now the main work begins. Go to Carousel.js, and create the functional component like so:

import React from 'react'

const Carousel = () => {
    return (
        <div className='carousel'>

        </div>
    )
}

export default Carousel

import CarouselData.js into Carousel.js and the useState hook:

import React, { useState } from 'react'
import { CarouselData } from './components/CarouselData'

Set the state of the image in slider like so:

const Carousel = () => {
   const [current, setCurrent] = useState(0)

Next, create functions to go to the next and previous slides using the the length of the array:

const length = CarouselData.length;

const next = () => {
   setCurrent(current === length - 1 ? 0 : current + 1)
}

const prev = () => {
   setCurrent(current === 0 ? length - 1: current - 1)
}

Below is the ES5 syntax for those who don't understand the Ternary Operator.

const length = CarouselData.length;

funtion next(){
  if(current === length - 1){
      return 0;
      } else {
      return current + 1;
      }
}

function prev(){
   if(current === 0){
      return length -1;
      } else {
      return current - 1;
      }
}

The function contained in next and prev are such that when the current iteration is 1 lesser than the length(remember that in JS, the items in the array are counter by index and the length is always 1 greater than the index), which is the last image in the slide, it moves back to index 0 whih is the first picture in the slide or Now we need to iterate through the array and add the make the current image show and hide others. W are going to use the map() method. We will check if the current image matches the index and output it.

<div className='carousel'>
            {CarouselData.map((slide, index) => {
                return(
                    <div className='slide' key={index}>
                        {index === current && (<img src={slide.image} key={slide.id} alt={slide.text}/>)}
                        {index === current && <h1 className='text'>{slide.text}</h1>}
                    </div>
                )
            })}
        </div>

If you start the development server at this point, you should see only the first image in the iteration. It's fine. Now, we are going to add the buttons to move between pictures. Include the following code in the existing code, just about the carousel data.

div className='carousel'>
            <button className='left-button' onClick={prev}>&lt;</button>
            <button className='right-button' onClick={next}>&gt;</button>

If you want, you could import icons and use as buttons but I'm going with the greater than and less than sign. At this point you should have a working but ugly looking carousel. And one more thing, let's give the slide element a dynamic class to help us animate it more efficiently.

<div className='slide'>

//Change it to

<div className={index === current ? 'slide active' : 'slide'} key={index}>

Now let's style the carousel. Copy and paste this into your index.css or you could do your own styling.

/*** Reset the whole style to avoid conflicts***/
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  padding: 0 5px;
  overflow: hidden;
}

.carousel{
  width: 700px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}

.carousel img{
  width: 100%
}

button{
  width: 50px;
  height: 50px;
  background-color: #777;
  color: #000;
  font-size: 3rem;
  border-radius: 50%;
  border: none;
  text-align: center;
  position: absolute;
  cursor: pointer;
  z-index: 1;
  user-select: none;
}

button:hover{
  transform: scale(0.95);
}

.left-button{
  left: 5%;
}

.right-button{
  right: 5%;
}


.slide {
  opacity: 0;
  transition-duration: 1s ease;
}

.slide.active {
  opacity: 1;
  transition-duration: 1s;
  transform: scale(1.08);
}

.text{
  width: 80%;
  position: absolute;
  bottom: 20%;
  left: 10%;
  text-align: center;
  color: #fff;
}

You should now have a working carousel. You an add as many images as you want and it wouldn't break. You can also style it hover you want with 3D effects and all.

https://codepen.io/pablo-clueless/pen/zYdpMoO