🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

lazy-react-carousel

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lazy-react-carousel

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

2.0.0
latest
Source
npm
Version published
Weekly downloads
7
-82.93%
Maintainers
1
Weekly downloads
 
Created
Source

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

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>
  )
}

Keywords

carousel

FAQs

Package last updated on 13 Aug 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts