jaagrav/react-pretty-carousel

Easily add beautiful carousels to your website in no time!

React-Pretty-Carousel

Easily add beautiful carousels to your website in no time!

Check out the Demo on the docs website!

Installation

In order to install react-pretty-carousel, run this command in your terminal.

npm i react-pretty-carousel --save

Or

yarn add react-pretty-carousel

Usage

Props

Prop	DataType	Description
items	integer	Number of items to display at once
mode	string	Style of the carousel, can be either normal or gallery
showControls	boolean	Show the dots and navigation buttons if true, and otherwise if false

External Functions and Values

You can summon and move/navigate through the carousel by importing and using the following functions:

import {
  CarouselWrapper,
  prev,
  next,
  moveTo,
  switchTo,
  presentIndex,
} from "react-pretty-carousel";

Function	Description	Parameters
prev()	Move to the previous slide	none
next()	Move to the next slide	none
moveTo(5)	Move to a certain index/object with smooth animation	integer
switchTo(5)	Abruptly move to a certain index/object	integer
presentIndex	Get the present index of the carousel object being displayed	none

react-pretty-carousel's Issues

Carousel auto play

Hello, any idea how to make the carousel start automatically?

Thanks!

TypeError: Cannot read properties of null (reading 'parentElement')

I have two page in my react application.

1. Home page (where I have used this react-pretty-carousel)
2. Sign page (simple form page)

When I switch from Home page to Sign page (using react-router-dom Routes, Navlink, etc) I face this issues.

Console (this error repeats to infinte in console) :-

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
at reactToStyle (CarouselItem.js:10)

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at CarouselDots.js:20

Uncaught TypeError: Cannot read properties of null (reading 'classList')
at CarouselDots.js:22

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
at reactToStyle (CarouselItem.js:10)
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at CarouselDots.js:20
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at CarouselDots.js:22
Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
at reactToStyle (CarouselItem.js:10)
reactToStyle @ CarouselItem.js:10
setInterval (async)
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at CarouselDots.js:20
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at CarouselDots.js:22

Please look into it and help to fix this.