React FancySlider

A lightweight and flexible carousel slider that allows you to build fully functional and advanced slider with three slides. This react library is built using react.js, css and adheres to latest ECMAScript specs. This library is intended to be used along with react.js.

Latest, update supports touch based devices and responsive layouts for mobiles. Supports IE10+ and all major browsers. You can view live demo here. If you have any issues, please follow this link.

Inspiration

Originally, this was a pure vanilla js module which I had developed for one of my client as per their unique requirement. They specifically wanted three slides carousel along with unique transition effect. Now, I have upgraded this library to have more control over carousel such as navigation buttons, transition duration, animation duration, number of slides to be displayed, e.t.c.

Installation

You can install this package using below command:

npm install react-fancyslider

Note: You are to use this library along with react.js, since it is a pure react component under the hood.

Usage

Import the Slider component in your desired react component using following code:

import {Slider} from 'react-fancyslider'

Then, simply use it with below code.

const images = [img1, img2, ....] //Slider Images

<Slider className='customClass' touch={true} slideToShow={3} images = {images} auto={true} timer={2000} transitionTime = {500} directionNav = {true} controlNav={true} gap={50} animationEasing = '' />

Props || Options

Below are the options to control Slider component as per requirement:

slideToShow {type: integar}: number of slides to show between 3 to 1 Default: 3

className {type: string}: custom class name passed to slider for better control

touch {type: boolean}: support for touch based and mobile devices. Default: true

images {type:array}: images for slider *Required

auto {type: boolean}: sets slider to auto slide Default: true

timer {type: integar}: sets the speed of the slideshow cycling, in milliseconds Default: 4000 || 4s

transitionTime {type: integar}: sets the speed of animation, in milliseconds Default" 500 || 0.5s

directionNav {type: boolean}: sets left and right arrow for navigation Default: false

controlNav {type: boolean}: sets dotted navigation buttons on bottom of slider Default: false

animationEasing {type:string [slide || fade]} : sets easing of animation. You can have choose between default, fade or simple slide easing Default: null

App Info

Author

Bivek Jang Gurung