react-owl-carousel

react-owl-carousel

React + Owl Carousel 2.3

1. Getting Started

• You need to inject a global window.jQuery first.

e.g. webpack

// ...
plugins: [
    // other plugins,
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
    }),
],
//...

you can use html script tag to inject jquery as well.

2. Set up your component

wrap your divs inside the OwlCarousel component

import React from 'react';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

// ....

// className "owl-theme" is optional
<OwlCarousel className='owl-theme' loop margin={10} nav>
    <div class='item'>
        <h4>1</h4>
    </div>
    <div class='item'>
        <h4>2</h4>
    </div>
    <div class='item'>
        <h4>3</h4>
    </div>
    <div class='item'>
        <h4>4</h4>
    </div>
    <div class='item'>
        <h4>5</h4>
    </div>
    <div class='item'>
        <h4>6</h4>
    </div>
    <div class='item'>
        <h4>7</h4>
    </div>
    <div class='item'>
        <h4>8</h4>
    </div>
    <div class='item'>
        <h4>9</h4>
    </div>
    <div class='item'>
        <h4>10</h4>
    </div>
    <div class='item'>
        <h4>11</h4>
    </div>
    <div class='item'>
        <h4>12</h4>
    </div>
</OwlCarousel>;

Event

| Name | Descrption | | :-----------: | :----------------------------------------------------------------- | --- | | onInitialize | When the plugin initializes. | ' | | onInitialized | When the plugin has initialized. | | onResize | When the plugin gets resized. | | onResized | When the plugin has resized. | | onRefresh | When the internal state of the plugin needs update. | | onRefreshed | When the internal state of the plugin has updated. | | onDrag | When the dragging of an item is started. | | onDragged | When the dragging of an item has finished. | | onTranslate | When the translation of the stage starts. | | onTranslated | When the translation of the stage has finished. | | onChange | Parameter: property. When a property is going to change its value. | | onChanged | Parameter: property. When a property has changed its value. | | onLoadLazy | When lazy image loads. | | onLoadedLazy | When lazy image has loaded. | | onStopVideo | When video has unloaded. | | onPlayVideo | When video has loaded. |

OwlCarousel Method

•   next(speed)
  

•   prev(speed)
  

•   to(position, speed)
  

•   create()
  

•   destroy()
  

•   play(timeout, speed)
  

•   stop()
  

OwlCarousel Class Props

Name	Type	Default	Descrption
refreshClass	string	'owl-refresh'	Class during refresh.
loadingClass	string	'owl-loading'	Class during load.
loadedClass	string	'owl-loaded'	Class after load.
rtlClass	string	'owl-rtl'	Class for right to left mode.
dragClass	string	'owl-drag'	Class for mouse drag mode.
grabClass	string	'owl-grab'	Class during mouse drag.
stageClass	string	'owl-stage'	Stage class.
stageOuterClass	string	'owl-stage-outer'	Stage outer class.
navContainerClass	string	'owl-nav'	Navigation container class.
navClass	[string]	['owl-prev','owl-next']	Navigation buttons classes.
controlsClass	string	'owl-controls'	Controls container class - wrapper for navs and dots.
dotClass	string	'owl-dot'	Dot Class.
dotsClass	string	'owl-dots'	Dots container class.
autoHeightClass	string	'owl-height'	Auto height class.
responsiveClass	string/bool	false	Optional helper class. Add '-' class to main element. Can be used to stylize content on given breakpoint.

OwlCarousel Options

offical docs

Name	Type	Default	Descrption
items	number	3	The number of items you want to see on the screen.
margin	number	0	margin-right(px) on item.
loop	bool	false	Infinity loop. Duplicate last and first items to get loop illusion.
center	bool	false	Center item. Works well with even an odd number of items.
mouseDrag	bool	true	Mouse drag enabled.
touchDrag	bool	true	Touch drag enabled.
pullDrag	bool	true	Stage pull to edge.
freeDrag	bool	false	Item pull to edge.
stagePadding	number	0	Padding left and right on stage (can see neighbours).
merge	bool	false	Merge items. Looking for data-merge='{number}' inside item..
mergeFit	bool	true	Fit merged items if screen is smaller than items value.
autoWidth	bool	false	Set non grid content. Try using width style on divs.
startPosition	number/string	0	Start position or URL Hash string like '#id'.
URLhashListener	bool	false	Listen to url hash changes. data-hash on items is required.
nav	bool	false	Show next/prev buttons.
rewind	bool	true	Go backwards when the boundary has reached.
navText	[dom element]	['next','prev']	HTML allowed.
navElement	string	'div'	DOM element type for a single directional navigation link.
slideBy	number/string	1	Navigation slide by x. 'page' string can be set to slide by page.
dots	bool	true	Show dots navigation.
dotsEach	number/bool	false	Show dots each x item.
dotData	bool	false	Used by data-dot content.
lazyLoad	bool	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	bool	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	bool	false	Autoplay.
autoplayTimeout	number	5000	Autoplay interval timeout.
autoplayHoverPause	bool	false	Pause on mouse hover.
smartSpeed	number	250	Speed Calculate. More info to come..
fluidSpeed	number		Speed Calculate. More info to come..
autoplaySpeed	number/bool	false	autoplay speed.
navSpeed	number/bool	false	Navigation speed.
dotsSpeed	number/bool		Pagination speed.
dragEndSpeed	number/bool	false	Drag end speed.
callbacks	bool	true	Enable callback events.
responsive	object	empty object	Object containing responsive options. Can be set to false to remove responsive capabilities.
responsiveRefreshRate	number	200	Responsive refresh rate.
responsiveBaseElement	dom element	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	bool	false	Enable fetching YouTube/Vimeo/Vzaar videos.
videoHeight	number/bool	false	Set height for videos.
videoWidth	number/bool	false	Set width for videos.
animateOut	string/bool	false	Class for CSS3 animation out.
animateIn	string/bool	false	Class for CSS3 animation in.
fallbackEasing	string	swing	Easing for CSS2 $.animate.
info	function	false	Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.
nestedItemSelector	string	false	Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name.
itemElement	string	'div'	DOM element type for owl-item.
stageElement	string	'div'	DOM element type for owl-stage.
navContainer	string/bool	false	Set your own container for nav.
dotsContainer	string/bool	false	Set your own container for dots.