lazy-react-carousel

2.0.0 • Public • Published

Lazy React Carousel 🎉

Light-weight and customizable horizontal carousel for React apps 🔥

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

Property Type Default Description
itemsPerSlide Number 1 Number of items visible in one slide
itemsToScroll Number 1 Number of items to scroll on navigation
showArrows Boolean true Hide/Show default arrow components
showCounter Boolean true Hide/Show default counter component
nextArrow Node Button Show custom right arrow component
prevArrow Node Button Show custom left arrow component
scrollDuration Number 500 Scrolling animation time in milliseconds
lazy Boolean true Lazy 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>
  )
}

Package Sidebar

Install

npm i lazy-react-carousel

Weekly Downloads

2

Version

2.0.0

License

ISC

Unpacked Size

35.8 kB

Total Files

20

Last publish

Collaborators

  • nishelia