2.0.0 • Published 5 years ago

lazy-react-carousel v2.0.0

Weekly downloads
9
License
ISC
Repository
github
Last release
5 years ago

Lazy React Carousel :tada:

Light-weight and customizable horizontal carousel for React apps :fire:

npm version

Getting started


Install using npm/yarn

npm install lazy-react-carousel --save

Usage

Add base styles to slider (Might be removed in future versions, instead add directly from slider component)

@import "~lazy-react-carousel/dist/index.css";

Prop Types

PropertyTypeDefaultDescription
itemsPerSlideNumber1Number of items visible in one slide
itemsToScrollNumber1Number of items to scroll on navigation
showArrowsBooleantrueHide/Show default arrow components
showCounterBooleantrueHide/Show default counter component
nextArrowNodeButtonShow custom right arrow component
prevArrowNodeButtonShow custom left arrow component
scrollDurationNumber500Scrolling animation time in milliseconds
lazyBooleantrueLazy load items when navigating

Public Methods

scrollToSlide ({slide: number})

Forcefully scroll to custom slide number

next ()

Scrolls to next slide

prev ()

Scrolls to prev slide

Can be used to implement custom arrows outside of the carousel component

Example

import React, { useRef } from 'react'
import Carousel from "lazy-react-carousel"

function LazyCarousel() {
  const ref = useRef()			
        
  const renderList () => {
  	// Some array of nodes
  }
    
  return (
    <React.Fragment>
        <Carousel
          ref={ref}
        >
            {renderList()}
        </Carousel>
        <button onClick={() => ref.current.next()}>Next</button>
        <button onClick={() => ref.current.prev()}>Prev</button>
    </React.Fragment>
  )
}
2.0.0

5 years ago

1.0.71

5 years ago

1.0.7

5 years ago

1.0.63

5 years ago

1.0.62

5 years ago

1.0.61

5 years ago

1.0.6

5 years ago

1.0.57

5 years ago

1.0.56

5 years ago

1.0.55

5 years ago

1.0.5

5 years ago

1.0.41

5 years ago

1.0.4

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago