ac-react-simple-image-slider

A simple image slider built with React, emotion and hooks

Install

npm install --save ac-react-simple-image-slider

or

yarn add ac-react-simple-image-slider

Usage

View raw code

import React from 'react';
import ImageSlider from 'ac-react-simple-image-slider';

const imageData = [
  {
    src: 'https://placeimg.com/640/480/any',
    title: 'Image 1'
  },
  {
    src: 'https://placeimg.com/640/480/any',
    title: 'Image 2'
  }
];

const Example = () => (
  <ImageSlider height='640px' width='480px' data={imageData} />
);

Props

Name	Type	Default	Description
initialIndex	number	0	The index of the initial slide image. 0 points to first slide image.
height	string	100%	Custom slider height. e.g.: 640px
width	string	100%	Custom slider width. e.g.: 480px
data	arrayOfObject	[]	(required) Slider images array.
-> src	string	-	(required) Slider item image URL.
-> title	string	-	(required) Slider item title. This also be used for alternative image text.
showArrows	bool	true	Whether the navigation arrows will display or not
showDots	bool	true	Whether the dots will display bottom of the slider or not
autoPlay	bool	true	(optional) Whether the slideshow should start automatically
duration	number	3	(optional) How long wait (seconds) before the next transition starts. It also uses by animation duration
infinite	bool	false	(optional) Whether the transition should loop throughout
elementWrapperStyles	object	null	(optional) Slide image wrapper styles
itemStyles	object	null	(optional) Slide image style

Todo

• Tests
• Add following props:

Name	Type	Default	Description
dotComponent	node	null	Custom component for the dots
leftArrowComponent	string	<	Custom left arrow
rightArrowComponent	string	>	Custom right arrow

License

MIT © abdullahceylan