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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example ✏️ Update Readme Mar 8, 2019
public
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
CHANGELOG.md
README.md
example.png 📝 Update README.md 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

README.md

ac-react-simple-image-slider

A simple image slider built with React, emotion and hooks

NPM JavaScript Style Guide

Install

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

or

yarn add ac-react-simple-image-slider

Usage

Example 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

You can’t perform that action at this time.