Skip to content

Latest commit

 

History

History
200 lines (190 loc) · 10.7 KB

README.md

File metadata and controls

200 lines (190 loc) · 10.7 KB
Raw

react-leaf-carousel

React simple infinite carousel with lazy loading and responsive support.

alt text

Installation

npm install react-leaf-carousel

Example

import React from 'react';
import ReactDOM from 'react-dom';

import InfiniteCarousel from 'react-leaf-carousel';

ReactDOM.render(
  <InfiniteCarousel
    breakpoints={[
      {
        breakpoint: 500,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
        },
      },
    ]}
    dots={true}
    showSides={true}
    sidesOpacity={0.5}
    sideSize={0.1}
    slidesToScroll={4}
    slidesToShow={4}
    scrollOnDevice={true}
  >
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=55b64e&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=904098&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ef4d9c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00f3d1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00ffff&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ee1f34&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=91b4c0&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6347&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ebbfbf&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=def1f9&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=cdf2c6&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=9fa616&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=2c4caa&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=44e3e1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6666&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=94e1e3&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=29083c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ffff99&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=616161&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
    <div>
      <img
        alt=""
        src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ed7ebe&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
      />
    </div>
  </InfiniteCarousel>,
  document.getElementById('root')
);

Properties

Property Type Description Default
arrows bool Enables tabbing and arrow key navigation true
dots bool Enable dot pagination false
paging bool Enable 1/x pagination false
pagingSeparator string 1/x pagination separator '/'
lazyLoad bool Lazy load slides that are not visible at first load true
swipe bool Add swipe event to scroll between slide pages true
animationDuration int Slide animation duration 500
slidesToShow int Number of slides to display 1
slidesToScroll int Number of slides to scroll 1
slidesSpacing int Margin between slides 10
autoCycle bool Enables autocycle between slide pages false
cycleInterval bool Autocycle interval duration 5000
pauseOnHover bool Pauses autocycle true
breakpoints array Array of objects in the form of { breakpoint: int, settings: { ... } } []
placeholderImageSrc string placeholder image source base64 gif image 1x1
nextArrow React element Optional custom arrow null
prevArrow React element Optional custom arrow null
scrollOnDevice bool Adds scroll functionality on touch devices instead of normal swipe, this disables lazy-loading, infinite navigation, arrows and dots false
showSides bool Show outer prev/next slides of the current slide page false
sidesOpacity int Side slides opacity amount 1
sideSize int Fraction visible of prev/next slides, when showSides is enabled .5
incrementalSides bool Dynamic sideSize depending on the browser's width and responsive breakpoints. Increments or decrements from max size 50% to min size 0% when expanding or narrowing the browser. false
onSlideChange func onSlideChange event -
onNextClick func onNextClick arrow event -
onPreviousClick func onPreviousClick arrow event -