react-swift-slider

React Swift Slider

React Swift Slider is a simple image/picture slider for react.

Demo

Demo-1

Example Repo on how to use react-swift-slider

https://github.com/zulucoda/react-swift-slider-test

Installation

npm i react-swift-slider

Usage

import SwiftSlider from 'react-swift-slider'

const data =  [
  {'id':'1','src':'https://media.mfbproject.co.za/repos/2017_alfa-romeo_stelvio_leaked_02.jpg'},
  {'id':'2','src':'https://media.mfbproject.co.za/repos/2017_alfa_romeo_stelvioquadrifoglio_official_09.jpg'},
  {'id':'3','src':'https://media.mfbproject.co.za/repos/2018-alfa-romeo-stelvio-quadrifoglio-specs-photos-speed-2.jpg'},
  {'id':'4','src':'https://media.mfbproject.co.za/repos/alfa-romeo-giulia-quadrifoglio-2017-us-wallpapers-and-hd-images-13.jpg'},
  {'id':'5','src':'https://media.mfbproject.co.za/repos/ARWP_Infra_Desk_1920_1080_Quad.png'}
];

class App extends Component {
  render() {
    return (
      <SwiftSlider data={data}/>
    );
  }
}

Available Props

Prop	Type	Description
data	Array	Array of slide id & src's
height	Number	Height of slider default 460px
interval	Number	Slide interval duration default 5000
activeDotColor	String	Active dot color
dotColor	String	Dot color
showDots	Boolean	Show/Hide Dots
enableNextAndPrev	Boolean	Show/Hide Controls

Change Default Height

This will render swift slide with 900px height. The default height is 450px.

const data =  [
  {'id':'1','src':'https://media.mfbproject.co.za/repos/2017_alfa-romeo_stelvio_leaked_02.jpg'},
  {'id':'2','src':'https://media.mfbproject.co.za/repos/2017_alfa_romeo_stelvioquadrifoglio_official_09.jpg'},
  {'id':'3','src':'https://media.mfbproject.co.za/repos/2018-alfa-romeo-stelvio-quadrifoglio-specs-photos-speed-2.jpg'},
  {'id':'4','src':'https://media.mfbproject.co.za/repos/alfa-romeo-giulia-quadrifoglio-2017-us-wallpapers-and-hd-images-13.jpg'},
  {'id':'5','src':'https://media.mfbproject.co.za/repos/ARWP_Infra_Desk_1920_1080_Quad.png'}
];

class App extends Component {
  render() {
    return (
      <SwiftSlider data={data} height={900}/>
    );
  }
}

Hide/Show Dots

These dots allow the user to change the image, by default the dots are displayed. To hide these dots just set showDots to false.

const data =  [
  {'id':'1','src':'https://media.mfbproject.co.za/repos/2017_alfa-romeo_stelvio_leaked_02.jpg'},
  {'id':'2','src':'https://media.mfbproject.co.za/repos/2017_alfa_romeo_stelvioquadrifoglio_official_09.jpg'},
  {'id':'3','src':'https://media.mfbproject.co.za/repos/2018-alfa-romeo-stelvio-quadrifoglio-specs-photos-speed-2.jpg'},
  {'id':'4','src':'https://media.mfbproject.co.za/repos/alfa-romeo-giulia-quadrifoglio-2017-us-wallpapers-and-hd-images-13.jpg'},
  {'id':'5','src':'https://media.mfbproject.co.za/repos/ARWP_Infra_Desk_1920_1080_Quad.png'}
];

class App extends Component {
  render() {
    return (
      <SwiftSlider data={data} showDots={false}/>
    );
  }
}

Hide/Show Previous and Next controls

These controls allow the user to go next or previous, the controls are located on the left and right side of the image. By default, these controls are available. To hide these controls just set enableNextAndPrev to false.

const data =  [
  {'id':'1','src':'https://media.mfbproject.co.za/repos/2017_alfa-romeo_stelvio_leaked_02.jpg'},
  {'id':'2','src':'https://media.mfbproject.co.za/repos/2017_alfa_romeo_stelvioquadrifoglio_official_09.jpg'},
  {'id':'3','src':'https://media.mfbproject.co.za/repos/2018-alfa-romeo-stelvio-quadrifoglio-specs-photos-speed-2.jpg'},
  {'id':'4','src':'https://media.mfbproject.co.za/repos/alfa-romeo-giulia-quadrifoglio-2017-us-wallpapers-and-hd-images-13.jpg'},
  {'id':'5','src':'https://media.mfbproject.co.za/repos/ARWP_Infra_Desk_1920_1080_Quad.png'}
];

class App extends Component {
  render() {
    return (
      <SwiftSlider data={data} enableNextAndPrev={false}/>
    );
  }
}

Available CSS Overrides

Class	Description
.swift-slider-container	Override slider container (slider wrapper)
.swift-slider-slides	Override slides container
.swift-slider-active-slide	Override active slide (current active slide displayed)
.swift-slider-slide	Override all slides
.swift-slider-dots	Override dots (bullets) container
.swift-slider-active-dot	Override active dot (bullet)
.swift-slider-dot	Override all dots (bullets)
.swift-slider-prev-btn	Override previous button
.swift-slider-next-btn	Override next button

License

MIT License.