README
react-slideshow-carousel
simple & easy to use customizable slideshow carousel built using ReactJS
Installation
npm i react-slideshow-carousel --save
Also install node-sass & sass-loader if already not installed in your application
npm i node-sass sass-loader --save
Usage
import React, Component from 'react';
import ReactCarousel from 'react-slideshow-carousel';
export default function MyComponent (props) {
const myImages = ['assets/image1', 'assets/image2'];// an array of image paths
const myConfig = {
"data": myImages,
"infinite": true,
"tofro" : false,
"autoplay": true,
"idleTime" : 3000, // 3 seconds
"showCaption": true,
"showSlideNum" : true,
"showDots": true,
"showArrows": 'both'
};
return <MyComponent config = {myConfig}/>;
}
Options
all the below configuration options (settings) should be passed as props in the form of an object named 'config' as shown in the example above.
data : an array of image paths
infinite : a boolean to specify whether infinite looping is on or off
- possible values: true | false ; true by default
tofro : a boolean to specify whether to & fro oscillation of slides should be enabled.
- possible values: true | false ; false by default
- 'infinite' has highest priority than 'tofro', hence if 'inifnite' is true, the value of 'tofro' will not be conisdered
- If 'inifinite' is false and 'tofro' is true, the slideshow will move back & forth after reaching the edge slides, e.g, when the slideshow reaches the last slide, it will move back one slide at a time till the beginning, and again toward the end
- 'autoplay' should be true for 'tofro' to work
autoplay : a boolean to indicate if the slideshow should play automatically
- possible values: true | false ; true by default
- If this value is false, user has to manually click the dots or arrows to move to corresponding slide
idleTime : time in milliseconds to specify how long a slide should appear, before moving to the next
- possible values: any number > 0 ; default value is 3000, which is equal to 3 seconds
showCaption : a boolean value to specify if a caption should be displayed for each slide
- possible values: true | false ; true by default
showSlideNum : a boolean to specify the number of slides
- possible values: true | false ; true by default
- If the value is true, a number will indicate the current slide number & total number of slides, eg., 2/5 means current slide is 2 and total number of slides is 5
showDots : a boolean to show or hide the carousel dots
- possible values: true | false ; true by default
- if this value is false, the carousel dots will be hidden
showArrows : a string value to show or hide the carousel arrows.
- possible values: 'both' | 'prev' | 'next' ; default value is 'both', which means both the left and right arrows will be visible
- if this value is 'next', only the right/next arrow will be visible
- if this value is 'prev', only the left/prev arrow will be visible
Test the code
- git clone https://github.com/yogeshkumar05/react-slideshow-carousel.git
- npm install
- npm start
- launch http://localhost:3001/