Neglected Pulse Machine

    react-leaf-carousel

    3.0.0 • Public • Published

    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 -

    Install

    npm i react-leaf-carousel

    DownloadsWeekly Downloads

    1,241

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    201 kB

    Total Files

    22

    Last publish

    Collaborators

    • gl0gl0