1.2.11 • Published 4 years ago

infinite-react-carousel v1.2.11

Weekly downloads
2,902
License
MIT
Repository
github
Last release
4 years ago

infinite-react-carousel

npm npm Bundle Size license Codecov CircleCI

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

PropDescriptionDefaultType
rowsNumber of rows per slide in the slider, (enables grid mode)1Number
slidesPerRowNumber of slides to display in grid mode, this is useful with rows option1Number
slidesToShowHow many slides to show in one frame1Number
className""String
centerModeCenter current slidefalseBoolean
swipeEnable/disable swiping to change slidestrueBoolean
adaptiveHeightAdjust the slide's height automaticallyfalseBoolean
centerPadding50String, Number
initialSlideIndex of first slidefalseBoolean, Number
pauseOnHoverPrevents autoplay while hovering on tracktrueBoolean
autoplayEnable/disable slider autoplayfalseBoolean
autoplayScrollHow many slides to scroll when autoplay is true1Number
autoplaySpeedDelay between each auto scroll (in milliseconds)3000Number
beforeChangeBefore Index change callback. (oldIndex, newIndex) => ...nullFunction
afterChangeIndex change callback. index => ...nullFunction
durationTransition duration in milliseconds200Number
shiftSet the spacing of the center item0Number
arrowsEnable/disable arrow buttontrueBoolean
arrowsBlocktrueBoolean
arrowsScrollHow many slides to scroll when click arrows button1Number
prevArrowCustom prev arrows buttonnullElement
nextArrowCustom next arrows buttonnullElement
dotsEnable/disable dotsfalseBoolean
dotsClassCSS class for dots"carousel-dots"String
dotsScrollHow many slides to scroll on one page1Number
appendDotsCustom dots templates. Works same as customPaging(dots) => <ul style={{ display: 'block' }}>{dots}</ul>Function
customPagingCustom paging templates(i) => <button type="button">{i + 1}</button>Function
onResziedetect carousel resize(e) => {}Function
onSwipeCallback after slide changes by swiping(direction) => {}Function
accessibilityEnable tabbing and arrow key navigationtrueBoolean
wheelEnable mouse wheel to slide itemfalseBoolean
wheelScrollHow many slides to scroll when wheel trigger1Number
virtualListfalseBoolean
overScanNumber of items to render before/after the visible slice of the carousel2Number

Methods

NameDescription
slickNextGo to the next slide
slickPrevGo to the previous slide
slickGoToGo to any slide
slickPausePause the autoplay
slickPlayStart 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

carouselsliderinfinitereactreact-component
babel-polyfillclassnameslodashprop-typesresize-observer-polyfill
@infinitebrahmanuniverse/nolb-infi@everything-registry/sub-chunk-1912@findanexpert-fae/components@plexaar/componentshns-lost-and-foundborjessons-guldcontentoh-components-libraryreact-facebook-photo-grid@zalastax/nolb-infi
1.2.11

4 years ago

1.2.10

4 years ago

1.2.9

4 years ago

1.2.8

4 years ago

1.2.7

4 years ago

1.2.6

4 years ago

1.2.5

4 years ago

1.2.4

4 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago