Complete solution for auto scroll in nuka-carousel.
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>
);
}
}
Run the demo npm run start
Open browser on http://localhost:8080/webpack-dev-server
###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
Install dependencies using npm install
.
Build the source code using npm run build
.