in react js nuka ~ read.
A pretty simple nuka autoscroll plugin

A pretty simple nuka autoscroll plugin

Complete solution for auto scroll in nuka-carousel.

img

Its simple as:

import NukaCarousel from 'nuka-carousel';  
import { NukaDecorate } from 'nuka-carousel-autoscroll';  
//... React ect.
const NukaDecorated = NukaDecorate({/*options*/})(NukaCarousel);  
// Some where ...
class App extends React.Component{  
    render(){
        return (
            <NukaDecorated /*nuka-carousel options available*/>
                <img src="http://placehold.it/1000x400/eef2f4/&text=slide1"/>
                <img src="http://placehold.it/1000x400/eef2f4/&text=slide2"/>
            </NukaDecorated>
        );
    }
}  

Install

npm install nuka-carousel-autoscroll  

Running the demo

Run the demo npm run start
Open browser on http://localhost:8080/webpack-dev-server

options

duration

Duration of autoscroll.

progressComponent(slideProgress, tickProgress)

Component that renders how its want progress of carousel. Supported two values, slideProgress and tickProgress.
slideProgress - progress of carousel,
tickProgress - progress of ticks based on duration.
Simple component already written see demo and progressIconComponent

maxTickCount

Timer resolution for tickProgress.

Internal

Inside it's using the react context api.

Nuka-carousel options

Available here

CONTRIBUTING

Installation

Install dependencies using

npm install  

Building

Build the source code using

npm run build  
comments powered by Disqus