Slider for React

A simple and easy to use react slider

Installation

Requires React 16 or later

npm i --save @aiherrera/react-slider

# or

yarn add @aiherrera/react-slider

Demo

You can check all the configurations in this Ai-CoderLab

Usage

{ Slider }

// ES5 syntax
const Slider = require('@aiherrera/react-slider')

// ES6 syntax
import Slider from '@aiherrera/react-slider'

Full example

import React from 'react'

import Slider from '@aiherrera/react-slider'

const App = () => {
  const manualColor = '#7474e7'
  const vertical = false
  const timing = 3000
  const images = []
  const showText = false
  const paragraph =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque ut eveniet ad exercitationem, ducimus mollitia alias debitis magnam atque animi illo officiis eum numquam iure suscipit, iste nisi. Excepturi, rem!'
  const textColor = '#F1EAEA'
  const backgroundColor = '#4949D8'

  return (
    <>
      <Slider
        color={manualColor}
        textColor={textColor}
        backgroundColor={backgroundColor}
        timing={timing}
        showText={showText}
        paragraph={paragraph}
        vertical={vertical}
        images={images}
      />
    </>
  )
}

Props

All these props are passed as defaults and can be overriden any time.

| Name | Type | Unit | Description | Default | | --------------- | ------- | ---- | -------------------------------------------------- | ------- | | color | string | N/A | Manual navigation color | #7474e7 | | textColor | string | N/A | Paragraph color | #F1EAEA | | backgroundColor | string | N/A | Paragraph background color | #4949D8 | | timing | number | N/A | Time in ms of slides transition | 3000ms | | showText | boolean | N/A | Wether or not to show the paragraph | false | | paragraph | string | N/A | The text of the paragraph | '' | | vertical | boolean | N/A | Switches the manual navigation vertical/horizontal | false | | images | array | N/A | A collection of images for the slides | [] |