react-owl-carousel2
1.Installation
npm install react-owl-carousel2
<!-- Load jQuery(1.7+) --> <!-- Customized Style -->
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 = {...} {...};
<OwlCarousel ="car" = = > <div><img ="/img/fullimage1.jpg" ="The Last of us"/></div> <div><img ="/img/fullimage2.jpg" ="GTA V"/></div> <div><img ="/img/fullimage3.jpg" ="Mirror Edge"/></div></OwlCarousel>
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.
Events
List including all events of type 'attachable' from carousel, lazyload and built-in plugins video.
Carousel
initialize.owl.carousel
Type: attachable
Callback: onInitialize
When the plugin initializes.
initialized.owl.carousel
Type: attachable
Callback: onInitialized
When the plugin has initialized.
resize.owl.carousel
Type: attachable
Callback: onResize
When the plugin gets resized.
resized.owl.carousel
Type: attachable
Callback: onResized
When the plugin has resized.
refresh.owl.carousel
Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]
When the internal state of the plugin needs update.
refreshed.owl.carousel
Type: attachable
Callback: onRefreshed
When the internal state of the plugin has updated.
drag.owl.carousel
Type: attachable
Callback: onDrag
When the dragging of an item is started.
dragged.owl.carousel
Type: attachable
Callback: onDragged
When the dragging of an item has finished.
translate.owl.carousel
Type: attachable
Callback: onTranslate
When the translation of the stage starts.
translated.owl.carousel
Type: attachable
Callback: onTranslated
When the translation of the stage has finished.
change.owl.carousel
Type: attachable
Callback: onChange
Parameter: property
When a property is going to change its value.
changed.owl.carousel
Type: attachable
Callback: onChanged
Parameter: property
When a property has changed its value.
Lazy
load.owl.lazy
Type: attachable
Callback: onLoadLazy
When lazy image loads.
loaded.owl.lazy
Type: attachable
Callback: onLoadedLazy
When lazy image has loaded.
Video
stop.owl.video
Type: attachable
Callback: onStopVideo
When video has unloaded.
play.owl.video
Type: attachable
Callback: onPlayVideo
When video has loaded.
Methods
- prev ()
<button =>prev</button>
- next ()
<button =>next</button>
- goTo (page)
<button =>goTo</button>