1.0.25 • Published 6 years ago

react-carousel-liron v1.0.25

Weekly downloads
1
License
ISC
Repository
-
Last release
6 years ago

React Carousel Liron

A responsive carousel for react that is very easy to use. Comes with a simple fading animation between slides. You can also have auto cycling between slides by adding some props.

Features

  • Responsive
  • Mobile friendly
  • Custom auto play interval
  • Stop play when mouse inside carousel and continue auto play when mouse outside the carousel
  • Infinite loop
  • Supports images , text content or anything you want.
  • Each direct child represents one slide.
  • Supports previuos/next
  • Custom active slide

Installing as a package

npm i react-carousel-liron --save

Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';   
import Carousel from 'react-carousel-liron';
class DemoCarousel extends Component {
  render() {        
    return (
      <div className="container">
        <Carousel>
            <div>
                <img src="assets/someimage1.jpg" />
                <h1>some text 1</h1>
                <p>some paragraph text 1</p>
            </div>
            <div>
                <img src="assets/someimage2.jpg" />
                <h1>some text 2</h1>
                <p>some paragraph text 2</p>
            </div>              
        </Carousel>
      </div>
    );
  }
}
ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

API

Carousel

import Carousel from 'react-carousel-liron'
NameTypeDefaultDescription
timernumbernullThe amount of time to delay between automatically cycling an item. If null, carousel will not automatically cycle
selectedIndexnumber0Controls the current visible slide

Demo

https://codesandbox.io/s/1o5lmx9kjj

1.0.25

6 years ago

1.0.24

6 years ago

1.0.23

6 years ago

1.0.22

6 years ago

1.0.21

6 years ago

1.0.20

6 years ago

1.0.19

6 years ago

1.0.18

6 years ago

1.0.17

6 years ago

1.0.16

6 years ago

1.0.15

6 years ago

1.0.14

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago