react-owl-carousel2

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';

2.Usage

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

<OwlCarousel ref="car" options={options} >
	<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>

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>

Options

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

items

Type: Number
Default: 3

The number of items you want to see on the screen.

---

margin

Type: Number
Default: 0

margin-right(px) on item.

---

loop

Type: Boolean
Default: false

Infinity loop. Duplicate last and first items to get loop illusion.

---

center

Type: Boolean
Default: false

Center item. Works well with even an odd number of items.

---

mouseDrag

Type: Boolean
Default: true

Mouse drag enabled.

---

touchDrag

Type: Boolean
Default: true

Touch drag enabled.

---

pullDrag

Type: Boolean
Default: true

Stage pull to edge.

---

freeDrag

Type: Boolean
Default: false

Item pull to edge.

---

stagePadding

Type: Number
Default: 0

Padding left and right on stage (can see neighbours).

---

merge

Type: Boolean
Default: false

Merge items. Looking for data-merge='{number}' inside item..

---

mergeFit

Type: Boolean
Default: true

Fit merged items if screen is smaller than items value.

---

autoWidth

Type: Boolean
Default: false

Set non grid content. Try using width style on divs.

---

startPosition

Type: Number/String
Default: 0

Start position or URL Hash string like '#id'.

---

URLhashListener

Type: Boolean
Default: false

Listen to url hash changes. data-hash on items is required.

---

nav

Type: Boolean
Default: false

Show next/prev buttons.

---

rewind

Type: Boolean
Default: true

Go backwards when the boundary has reached.

---

navText

Type: Array
Default: ['next','prev']

HTML allowed.

---

navElement

Type: String
Default: div

DOM element type for a single directional navigation link.

---

slideBy

Type: Number/String
Default: 1

Navigation slide by x. 'page' string can be set to slide by page.

---

dots

Type: Boolean
Default: true

Show dots navigation.

---

dotsEach

Type: Number/Boolean
Default: false

Show dots each x item.

---

dotData

Type: Boolean
Default: false

Used by data-dot content.

---

lazyLoad

Type: Boolean
Default: false

Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not <img>

---

lazyContent

Type: Boolean
Default: false

lazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. It is a nice options so i will work on it in the nearest feature.

---

autoplay

Type: Boolean
Default: false

Autoplay.

---

autoplayTimeout

Type: Number
Default: 5000

Autoplay interval timeout.

---

autoplayHoverPause

Type: Boolean
Default: false

Pause on mouse hover.

---

smartSpeed

Type: Number
Default: 250

Speed Calculate. More info to come..

---

fluidSpeed

Type: Boolean
Default: Number

Speed Calculate. More info to come..

---

autoplaySpeed

Type: Number/Boolean
Default: false

autoplay speed.

---

navSpeed

Type: Number/Boolean
Default: false

Navigation speed.

---

dotsSpeed

Type: Boolean
Default: Number/Boolean

Pagination speed.

---

dragEndSpeed

Type: Number/Boolean
Default: false

Drag end speed.

---

callbacks

Type: Boolean
Default: true

Enable callback events.

---

responsive

Type: Object
Default: empty object

Object containing responsive options. Can be set to false to remove responsive capabilities.

---

responsiveRefreshRate

Type: Number
Default: 200

Responsive refresh rate.

---

responsiveBaseElement

Type: DOM element
Default: window

Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.

---

video

Type: Boolean
Default: false

Enable fetching YouTube/Vimeo/Vzaar videos.

---

videoHeight

Type: Number/Boolean
Default: false

Set height for videos.

---

videoWidth

Type: Number/Boolean
Default: false

Set width for videos.

---

animateOut

Type: String/Boolean
Default: false

Class for CSS3 animation out.

---

animateIn

Type: String/Boolean
Default: false

Class for CSS3 animation in.

---

fallbackEasing

Type: String
Default: swing

Easing for CSS2 $.animate.

---

info

Type: Function
Default: false

Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.

---

nestedItemSelector

Type: String/Class
Default: false

Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name.

---

itemElement

Type: String
Default: div

DOM element type for owl-item.

---

stageElement

Type: String
Default: div

DOM element type for owl-stage.

---

navContainer

Type: String/Class/ID/Boolean
Default: false

Set your own container for nav.

---

dotsContainer

Type: String/Class/ID/Boolean
Default: false

Set your own container for nav.

---