Carousel

The carousel component typically consists of a slider with images content, for displaying information.

Preview

Usage

The carousel component manages the slider logic internally using a custom hook, useCarousel.

npm i react-hartan

import { Carousel } from "react-hartan"

function App() {

  return (
    <>
      <Carousel></Carousel>
    </>
  )
}

export default App

Customization With Props

• images -> Accepts an array of string values, which may be the source links of the images, used in the slider.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• imgLoad -> The imgLoad prop is mapped to the loading attribute in HTML img tag. It allows to provide overall the value for loading attribute, "lazy" | "eager".

• userCarouselStyle -> Accepts class name(s) as string, the custom style prop for the carousel container.

• userImagesStyle -> Accepts class name(s) as string, the custom style prop for the images container.

Example:

import { Carousel } from "react-hartan"

const list = [
    "https://dummyimage.com/601x300",
    "https://dummyimage.com/602x300",
    "https://dummyimage.com/603x300",
    "https://dummyimage.com/604x300",
    "https://dummyimage.com/605x300",
];

function App() {

  return (
    <>
      <Carousel images={list}></Carousel>
    </>
  )
}

export default App

Component Code

This is the code for the Carousel component.

Carousel.jsx

import useCarousel from "../../Hooks/Carousel"
import carouselStyle from "./Carousel.module.css"
import PropTypes from "prop-types"

const imageList = [
    "https://dummyimage.com/601x300",
    "https://dummyimage.com/602x300",
    "https://dummyimage.com/603x300",
    "https://dummyimage.com/604x300",
    "https://dummyimage.com/605x300",
];

export default function Carousel({ images = imageList, id, imgLoad, userCarouselStyle, userImagesStyle }) {

    const [currentSlide, handleLeftArrow, handleRightArrow] = useCarousel(0, images.length);

    return (
        <section className={`${carouselStyle.carousel} ${userCarouselStyle}`}>
            <div className={`${carouselStyle.arrows}`}>
                <span className={`${carouselStyle.leftArrow}`} onClick={handleLeftArrow}>&lt;</span>
                <span className={`${carouselStyle.rightArrow}`} onClick={handleRightArrow}>&gt;</span>
            </div>
            <div className={`${carouselStyle.images} ${userImagesStyle}`}>
                {
                    images.map((image, index) => {
                        return (
                            <figure key={index} className={`${carouselStyle.slides}`} style={{ display: currentSlide === index ? "block" : "none" }}>
                                <img src={image} alt={`Slide ${index + 1}`} loading={imgLoad}/>
                            </figure>
                        )
                    })
                }
            </div>
        </section>
    )
}

Carousel.propTypes = {
    images: PropTypes.arrayOf(PropTypes.string),
    id: PropTypes.string,
    userCarouselStyle: PropTypes.string,
    userImagesStyle: PropTypes.string
};

Carousel.module.css

/* Carousel Styling */

/* Carousel container */
.carousel {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 2px solid rgb(179, 175, 175);
    border-radius: .5rem;
    position: relative;
    width: 50rem;
    height: 25rem;
}

/* Arrows container */
.arrows {
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.leftArrow,
.rightArrow {
    position: absolute;
    font-size: 3rem;
    top: 50%;
    transform: translateY(-50%);
    color: gray;
}

.leftArrow {
    left: 1%;
}

.rightArrow {
    right: 1%;
}

/* images container */
.images {
    display: flex;
    gap: 1rem;
    overflow: hidden;
}

.slides {
    width: 100%;
}

.slides img {
    width: 100%;
    height: 100%;
}

/* responsive design */
@media(width<768px){
    .carousel{
        width: 40rem;
        height: 20rem;
    }
}

@media(width<471px){
    .carousel{
        width: 32rem;
        height: 16rem;
    }
}