react-web-carousel

Carousel for react web

Responsive

Valid for web and mobile

Instalation

npm i react-web-carousel

Example

CodeSandBoc: https://codesandbox.io/s/crazy-easley-8luju

Usage

import React from "react";
import {
  Carousel,
  useWindowSize,
  useMeasureByRef,
  ImageProps,
} from "../components/Carousel";
import { isMobile } from "react-device-detect";
 
const aspectRatio = 1365 / 2048;
 
const images: ImageProps[] = [
  { src: "./Images/assets/1.jpg", alt: "1" },
  { src: "./Images/assets/2.jpg", alt: "2" },
  { src: "./Images/assets/3.jpg", alt: "3" },
  { src: "./Images/assets/4.jpg", alt: "4" },
  { src: "./Images/assets/6.jpg", alt: "6" },
];
 
const Example = () => {
  const { height: wHeight, width: wWidth } = useWindowSize();
  const { height: hHeight } = useMeasureByRef(
    document.getElementById("header")
  )[0];
 
  const width = wWidth;
  let height = 0;
  let imageWidth = 0;
  let imageHeight = 0;
 
  if (isMobile) {
    imageWidth = width;
    imageHeight = imageWidth * aspectRatio;
  } else {
    //Avoiding the header
    height = wHeight - hHeight;
    imageWidth = height / aspectRatio;
    imageHeight = height;
  }
 
  return (
    <>
      <Carousel
        width={width}
        height={isMobile ? imageHeight : height}
        images={images}
        imageProps={{ height: imageHeight, width: imageWidth }}
        auto={true}
        autoTime={4000}
        hideArrows={isMobile}
        containerProps={{
          backgroundColor: "rgba(0,0,0,0.2)",
        }}
      />
    </>
  );
};
 
export default Example;
 

In the example is using the Hooks useWindowSize that provides the size of the current window and useMeasureByRef gives you the dimensions of the element that you pass, in this case the header, that it's used to avoid the header size in the calculated image size.

Props

CarouselProps
auto?	boolean
width?	number
height?	number
images	ImageProps[]
imageProps?	CSSProperties
cardProps?	CSSProperties
imageDescriptionProps?	ImageDescriptionProps
arrowLeftProps?	CSSProperties
arrowRightProps?	CSSProperties
onForward?	(index: number) => void
onBack?	(index: number) => void
hideArrows?	boolean
autoTime?	boolean
animationConfig?	AnimationConfig
hideImageDescription?	boolean

ImageProps
src?	string
alt?	string
description?	ImageDescription

AnimationConfig
mass?	number
tension?	number
friction?	number

ImageDescription
title?	string
text?	string

ImageDescriptionProps
container?	CSSProperties
title?	CSSProperties
text?	CSSProperties

Hooks

useWindowSize

Provides the windows size

useMeasure

Provides the windows size (other way)

useMeasureByRef

Provides the dimensions of the element Example:

useMeasureByRef(document.getElementById("header"))[0];

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.