react-jedlislider v1.1.2

react-jedlislider

What is jedliSlider?

jedliSlider is interactive, continuous carousel with multiple options to use in your React app.

react-jedlislider is react version of jedliSlider with only continuous mode (because this mode is the one fully finished, and used the most)

DEMO page

DEMO

Compatibility

Slider is built on css flexbox. So will be compatible with every browser that supports flexbox.

Why jedliSlider?

Because it’s easy to use, modern and will have all options that you want. Some popular carousels still use floats and a lot of unnecessary scripts/styles. My intention was to create one slider, that will contain all things i missed in other carousels. With as low code and css as possible. So you don't need to override some default styles.

What's new?

v. 1.1.2

• Added resizeHandler so slider will recalculate if should rotate when width of slide change (usefull when width of slide is based on lazy loading image)

Previous update:

• React version of jedliSlider

Install

npm install --save react-jedlislider

Basic Usage

import React,  { Component }  from  'react'

  

import JedliSlider,  { JedliSlide }  from  'react-jedlislider'

import  'react-jedlislider/dist/index.css'

  

class  Example  extends  Component  {

  render()  {

    return  (

    <JedliSlider>

      <JedliSlide>Your slide 1</JedliSlide>

      <JedliSlide>Your slide 2</JedliSlide>

      <JedliSlide>Your slide 3</JedliSlide>

    </JedliSlider>

    )

  }
}

Usage with custom settings

import React,  { Component }  from  'react'

  

import JedliSlider,  { JedliSlide }  from  'react-jedlislider'

import  'react-jedlislider/dist/index.css'

  

class  Example  extends  Component  {

  render()  {

    return  (

    <JedliSlider speed={125} slidesWidth='auto'>

      <JedliSlide>Your slide 1</JedliSlide>

      <JedliSlide>Your slide 2</JedliSlide>

      <JedliSlide>Your slide 3</JedliSlide>

    </JedliSlider>

    )

  }
}

List of options

More info on DEMO page

License

MIT © jedlikk