react-owl-carousel2

React + Owl Carousel 2

1.Installation

npm install react-owl-carousel2

<!-- Load jQuery(1.7+) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<!-- Customized Style -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

import React from 'react';
import OwlCarousel from 'react-owl-carousel2';
import 'react-owl-carousel2/style.css'; //Allows for server-side rendering.

2.Usage

const options = {
    items: 1,
    nav: true,
    rewind: true,
    autoplay: true
};

const events = {
    onDragged: function(event) {...},
    onChanged: function(event) {...}
};

<OwlCarousel ref="car" options={options} events={events} >
	<div><img src="/img/fullimage1.jpg" alt="The Last of us"/></div>
	<div><img src="/img/fullimage2.jpg" alt="GTA V"/></div>
	<div><img src="/img/fullimage3.jpg" alt="Mirror Edge"/></div>
</OwlCarousel>

Options

List including all options from built-in plugins video, lazyload, autoheight and animate.

Events

List including all events of type 'attachable' from carousel, lazyload and built-in plugins video.

Methods

• prev ()

<button onClick={() => this.refs.car.prev()}>prev</button>

• next ()

<button onClick={() => this.refs.car.next()}>next</button>

• goTo (page)

<button onClick={() => this.refs.car.goTo(0)}>goTo</button>