A carousel/slide component build with React.

Documentation

Installation

yarn add awesome-react-carousel
npm install awesome-react-carousel

Example

    import Slider from "awesome-react-carousel"
    
	render(){
		const slides = [
			<div>slide1</div>,
			<div>slide2</div>,
			<div>slide3</div>,
			<div>slide4</div>,
		]
	
		return (
			<Slider slides={slides} slidesToShow={3} speed={500} />
		)
	}

For complete examples on how each prop works check the examples included (see Development)

Props

slides (type: array, default: []) An array of slides to be shown. The items need to be html elements

slidesToShow (type: int, float, default: 1) Number of slides to show

slidesToScroll (type: int, float, default: 1) Number of slides to scroll

infinite (type: boolean, default: false) Toggles infinite loop sliding

speed (type: int, default: 300) Slide animation speed in milliseconds

autoplay (type: boolean, default: false) Toggles the autoplay of slides

autoplaySpeed (type: int, default: 2000) Autoplay speed in milliseconds'

dots (type: boolean, default: false) Toggles the visibility of the slides dots

arrows (type: boolean, default: true) Toggles the visibility of the slides arrows

nativeMobile (type: boolean, default: false) If true and the width of the page is < 1024) the slider uses native scroll

free (type: boolean, default: false) If true and the width of the page is < 1024) the slider scroll is free

height (type: int, default: undefined) If set, the slider will have the height set in pixels

classPrefix (type: string, default: empty string) The className prefix to be added to all the elements that have a className set

Ex: classPrefix: "test-" will modify the main slider div to have the className "test-slider"

classSuffix (type: string, default: empty string) The className suffix to be added to all the elements that have a className set

Ex: classSuffix: "-test" will modify the main slider div to have the className "slider-test"

Development

Run examples

git clone [email protected]:icoldoweb/awesome-react-carousel.git
cd awesome-react-carousel
yarn
yarn start
// a new tab will open in your default browser on http://localhost:8080