1.1.6 • Published 4 years ago

react-web-carousel v1.1.6

Weekly downloads
3
License
ISC
Repository
github
Last release
4 years ago

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
imagesImageProps[]
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.