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