infinite-react-carousel

infinite-react-carousel

Installation

npm

npm install infinite-react-carousel --save

yarn

yarn add infinite-react-carousel

Example

import React from 'react';
import Slider from 'infinite-react-carousel';

const SimpleSlider = () => (
  <Slider dots>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
  </Slider>
);

Props

Prop	Description	Default	Type
rows	Number of rows per slide in the slider, (enables grid mode)	1	Number
slidesPerRow	Number of slides to display in grid mode, this is useful with rows option	1	Number
slidesToShow	How many slides to show in one frame	1	Number
className		""	String
centerMode	Center current slide	false	Boolean
swipe	Enable/disable swiping to change slides	true	Boolean
adaptiveHeight	Adjust the slide's height automatically	false	Boolean
centerPadding		50	String, Number
initialSlide	Index of first slide	false	Boolean, Number
pauseOnHover	Prevents autoplay while hovering on track	true	Boolean
autoplay	Enable/disable slider autoplay	false	Boolean
autoplayScroll	How many slides to scroll when autoplay is true	1	Number
autoplaySpeed	Delay between each auto scroll (in milliseconds)	3000	Number
beforeChange	Before Index change callback. (oldIndex, newIndex) => ...	null	Function
afterChange	Index change callback. index => ...	null	Function
duration	Transition duration in milliseconds	200	Number
shift	Set the spacing of the center item	0	Number
arrows	Enable/disable arrow button	true	Boolean
arrowsBlock		true	Boolean
arrowsScroll	How many slides to scroll when click arrows button	1	Number
prevArrow	Custom prev arrows button	null	Element
nextArrow	Custom next arrows button	null	Element
dots	Enable/disable dots	false	Boolean
dotsClass	CSS class for dots	"carousel-dots"	String
dotsScroll	How many slides to scroll on one page	1	Number
appendDots	Custom dots templates. Works same as customPaging	(dots) => <ul style={{ display: 'block' }}>{dots}</ul>	Function
customPaging	Custom paging templates	(i) => <button type="button">{i + 1}</button>	Function
onReszie	detect carousel resize	(e) => {}	Function
onSwipe	Callback after slide changes by swiping	(direction) => {}	Function
accessibility	Enable tabbing and arrow key navigation	true	Boolean
wheel	Enable mouse wheel to slide item	false	Boolean
wheelScroll	How many slides to scroll when wheel trigger	1	Number
virtualList		false	Boolean
overScan	Number of items to render before/after the visible slice of the carousel	2	Number

Methods

Name	Description
slickNext	Go to the next slide
slickPrev	Go to the previous slide
slickGoTo	Go to any slide
slickPause	Pause the autoplay
slickPlay	Start the autoplay

Development

Want to run demos locally

git clone https://github.com/g787543/infinite-react-carousel.git
cd infinite-react-carousel

npm

npm install
npm run dev

yarn

yarn
yarn dev

open http://localhost:8080

LICENSE

The project is licensed under the terms of MIT license