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.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>List including all options from built-in plugins video, lazyload, autoheight and animate.
Type: Number
Default: 3
The number of items you want to see on the screen.
Type: Number
Default: 0
margin-right(px) on item.
Type: Boolean
Default: false
Infinity loop. Duplicate last and first items to get loop illusion.
Type: Boolean
Default: false
Center item. Works well with even an odd number of items.
Type: Boolean
Default: true
Mouse drag enabled.
Type: Boolean
Default: true
Touch drag enabled.
Type: Boolean
Default: true
Stage pull to edge.
Type: Boolean
Default: false
Item pull to edge.
Type: Number
Default: 0
Padding left and right on stage (can see neighbours).
Type: Boolean
Default: false
Merge items. Looking for data-merge='{number}' inside item..
Type: Boolean
Default: true
Fit merged items if screen is smaller than items value.
Type: Boolean
Default: false
Set non grid content. Try using width style on divs.
Type: Number/String
Default: 0
Start position or URL Hash string like '#id'.
Type: Boolean
Default: false
Listen to url hash changes. data-hash on items is required.
Type: Boolean
Default: false
Show next/prev buttons.
Type: Boolean
Default: true
Go backwards when the boundary has reached.
Type: Array
Default: ['next','prev']
HTML allowed.
Type: String
Default: div
DOM element type for a single directional navigation link.
Type: Number/String
Default: 1
Navigation slide by x. 'page' string can be set to slide by page.
Type: Boolean
Default: true
Show dots navigation.
Type: Number/Boolean
Default: false
Show dots each x item.
Type: Boolean
Default: false
Used by data-dot content.
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>
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.
Type: Boolean
Default: false
Autoplay.
Type: Number
Default: 5000
Autoplay interval timeout.
Type: Boolean
Default: false
Pause on mouse hover.
Type: Number
Default: 250
Speed Calculate. More info to come..
Type: Boolean
Default: Number
Speed Calculate. More info to come..
Type: Number/Boolean
Default: false
autoplay speed.
Type: Number/Boolean
Default: false
Navigation speed.
Type: Boolean
Default: Number/Boolean
Pagination speed.
Type: Number/Boolean
Default: false
Drag end speed.
Type: Boolean
Default: true
Enable callback events.
Type: Object
Default: empty object
Object containing responsive options. Can be set to false to remove responsive capabilities.
Type: Number
Default: 200
Responsive refresh rate.
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.
Type: Boolean
Default: false
Enable fetching YouTube/Vimeo/Vzaar videos.
Type: Number/Boolean
Default: false
Set height for videos.
Type: Number/Boolean
Default: false
Set width for videos.
Type: String/Boolean
Default: false
Class for CSS3 animation out.
Type: String/Boolean
Default: false
Class for CSS3 animation in.
Type: String
Default: swing
Easing for CSS2 $.animate.
Type: Function
Default: false
Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.
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.
Type: String
Default: div
DOM element type for owl-item.
Type: String
Default: div
DOM element type for owl-stage.
Type: String/Class/ID/Boolean
Default: false
Set your own container for nav.
Type: String/Class/ID/Boolean
Default: false
Set your own container for nav.
List including all events of type 'attachable' from carousel, lazyload and built-in plugins video.
Type: attachable
Callback: onInitialize
When the plugin initializes.
Type: attachable
Callback: onInitialized
When the plugin has initialized.
Type: attachable
Callback: onResize
When the plugin gets resized.
Type: attachable
Callback: onResized
When the plugin has resized.
Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]
When the internal state of the plugin needs update.
Type: attachable
Callback: onRefreshed
When the internal state of the plugin has updated.
Type: attachable
Callback: onDrag
When the dragging of an item is started.
Type: attachable
Callback: onDragged
When the dragging of an item has finished.
Type: attachable
Callback: onTranslate
When the translation of the stage starts.
Type: attachable
Callback: onTranslated
When the translation of the stage has finished.
Type: attachable
Callback: onChange
Parameter: property
When a property is going to change its value.
Type: attachable
Callback: onChanged
Parameter: property
When a property has changed its value.
Type: attachable
Callback: onLoadLazy
When lazy image loads.
Type: attachable
Callback: onLoadedLazy
When lazy image has loaded.
Type: attachable
Callback: onStopVideo
When video has unloaded.
Type: attachable
Callback: onPlayVideo
When video has loaded.
- 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>