Skip to content
A simple React image slider built with React.js, emotion and hooks
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
example ✏️ Update Readme Mar 8, 2019
src ⚡️ Replace styled-components with emotion Mar 8, 2019
.babelrc 🔧 Update configuration files Dec 24, 2018
.eslintrc 🔧 Configurations Dec 23, 2018
.gitignore 🙈 Update .gitignore Jan 8, 2019
.travis.yml 🔧 Update configuration files Dec 24, 2018
example.png 📝 Update Dec 25, 2018
jest.config.js 🔧 Update configuration files Dec 24, 2018
package.json ✏️ Update Readme Mar 8, 2019
yarn.lock ⬆️ Upgrade React and replace style-components with emotion Mar 8, 2019


A simple image slider built with React, emotion and hooks

NPM JavaScript Style Guide


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


yarn add ac-react-simple-image-slider


Example usage

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

const imageData = [
    src: '',
    title: 'Image 1'
    src: '',
    title: 'Image 2'

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


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


  • 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


MIT © abdullahceylan

You can’t perform that action at this time.