/itemSlider

Item slider with several features written in React.

Primary LanguageJavaScriptMIT LicenseMIT

Item Slider

Demo

https://itemsliderdl.firebaseapp.com

Get started!

git clone
cd itemSlider
npm i

Start the dev server:


npm run start

Build:


npm run build

Codebase overview

/
├─ public/
|  ├─ dist/
|  |  ├─ bundle.css           # CSS that's generated from SASS
|  |  ├─ bundle.js            # Contains scripts of components & vendor(s).
|  ├─ index.html              # Contains root element to mount your app.
└─ src/
   ├─ components/             # Create components here
   |  ├─ ItemSlider/
   |─ containers/             # Containers bridge Components with the State.
   |  ├─ Gallery.js
   ├─ styles/                 # All styling goes here.
   |  ├─ main.scss
   ├─ services/               # Services
   |  ├─ api.js
   |  ├─ fetch.js
   ├─ utils/                  # Helper methods
   |  ├─ config.js
   |  ├─ styles.js
   ├─ App.js                  # Include your main component(s).
   ├─ index.js                # Passes state to App. Renders markup to DOM.

Widgets

ItemSlider widget

ItemSlider has the following features:

Advanced configuration

  • Infinite loop
  • FadeOut animation
  • AutoPlay mode
  • Mobile friendly
  • Responsive design
  • Swipe to slide
  • Start index
  • Slide to index
  • RTL
  • Keyboard navigation
  • Touch and Drag support
  • Custom rendered slides
  • Custom animation duration
  • Multiple items in the slide
  • Show / hide anything (indicators, arrows, slides indexes)

Quick Start

TO DO

Props

  • items : Array, default [] - gallery items, preferable to use this property instead of children

  • duration : Number, default 250 - Duration of slides transition (milliseconds)

  • responsive : Object, default {} - Number of items in the slide

      {
      0: {
          items: 1
      },
      1024: {
          items: 3
      }
  }

  • buttonsDisabled : Boolean, false - Disable buttons control

  • dotsDisabled : Boolean, false - Disable dots navigation

  • startIndex : Number, 0 - The starting index of the carousel

  • slideToIndex : Number, 0 - Sets the carousel at the specified position

  • swipeDisabled : Boolean, default false - Disable swipe handlers

  • mouseDragEnabled : Boolean, default false - Enable mouse drag animation

  • infinite : Boolean, default true - Disable infinite mode

  • fadeOutAnimation : Boolean, false - Enable fadeout animation. Fired when 1 item is in the slide

  • keysControlDisabled : Boolean, default false - Disable keys controls (left, right, space)

  • playButtonEnabled : Boolean, default false - Disable play/pause button

  • autoPlay : Boolean, default false - Set auto play mode

  • autoPlayInterval : Number, default 250 - Interval of auto play animation (milliseconds). If specified, a larger value will be taken from comparing this property and the duration one

  • autoPlayDirection : String, default ltr - To run auto play in the left direction specify rtl value

  • autoPlayActionDisabled : Boolean, default false - If this property is identified as true auto play animation will be stopped after clicking user on any gallery button

  • stopAutoPlayOnHover : Boolean, default true - If this property is identified as false auto play animation won't stopped on hover

  • showSlideIndex : Boolean, default false - Show slide info

  • onSlideChange : Function - Fired when the event object is changing / returns event object

  • onSlideChanged : Function - Fired when the event object was changed / returns event object

  • preventEventOnTouchMove : Boolean, default false - Prevent the browser's touchmove event when carousel is swiping