roc
3.0/51
react-owl-carousel
npm i react-owl-carousel
roc

react-owl-carousel

React.js + Owl Carousel

by xhriman

2.3.3 (see all)License:ISCTypeScript:Built-In
npm i react-owl-carousel
Readme

react-owl-carousel npm version

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

NameDescrption
onInitializeWhen the plugin initializes.'
onInitializedWhen the plugin has initialized.
onResizeWhen the plugin gets resized.
onResizedWhen the plugin has resized.
onRefreshWhen the internal state of the plugin needs update.
onRefreshedWhen the internal state of the plugin has updated.
onDragWhen the dragging of an item is started.
onDraggedWhen the dragging of an item has finished.
onTranslateWhen the translation of the stage starts.
onTranslatedWhen the translation of the stage has finished.
onChangeParameter: property. When a property is going to change its value.
onChangedParameter: property. When a property has changed its value.
onLoadLazyWhen lazy image loads.
onLoadedLazyWhen lazy image has loaded.
onStopVideoWhen video has unloaded.
onPlayVideoWhen video has loaded.

OwlCarousel Method

  •   next(speed)
    
  •   prev(speed)
    
  •   to(position, speed)
    
  •   create()
    
  •   destroy()
    
  •   play(timeout, speed)
    
  •   stop()
    

OwlCarousel Class Props

NameTypeDefaultDescrption
refreshClassstring'owl-refresh'Class during refresh.
loadingClassstring'owl-loading'Class during load.
loadedClassstring'owl-loaded'Class after load.
rtlClassstring'owl-rtl'Class for right to left mode.
dragClassstring'owl-drag'Class for mouse drag mode.
grabClassstring'owl-grab'Class during mouse drag.
stageClassstring'owl-stage'Stage class.
stageOuterClassstring'owl-stage-outer'Stage outer class.
navContainerClassstring'owl-nav'Navigation container class.
navClass[string]['owl-prev','owl-next']Navigation buttons classes.
controlsClassstring'owl-controls'Controls container class - wrapper for navs and dots.
dotClassstring'owl-dot'Dot Class.
dotsClassstring'owl-dots'Dots container class.
autoHeightClassstring'owl-height'Auto height class.
responsiveClassstring/boolfalseOptional helper class. Add '-' class to main element. Can be used to stylize content on given breakpoint.

OwlCarousel Options

offical docs

NameTypeDefaultDescrption
itemsnumber3The number of items you want to see on the screen.
marginnumber0margin-right(px) on item.
loopboolfalseInfinity loop. Duplicate last and first items to get loop illusion.
centerboolfalseCenter item. Works well with even an odd number of items.
mouseDragbooltrueMouse drag enabled.
touchDragbooltrueTouch drag enabled.
pullDragbooltrueStage pull to edge.
freeDragboolfalseItem pull to edge.
stagePaddingnumber0Padding left and right on stage (can see neighbours).
mergeboolfalseMerge items. Looking for data-merge='{number}' inside item..
mergeFitbooltrueFit merged items if screen is smaller than items value.
autoWidthboolfalseSet non grid content. Try using width style on divs.
startPositionnumber/string0Start position or URL Hash string like '#id'.
URLhashListenerboolfalseListen to url hash changes. data-hash on items is required.
navboolfalseShow next/prev buttons.
rewindbooltrueGo backwards when the boundary has reached.
navText[dom element]['next','prev']HTML allowed.
navElementstring'div'DOM element type for a single directional navigation link.
slideBynumber/string1Navigation slide by x. 'page' string can be set to slide by page.
dotsbooltrueShow dots navigation.
dotsEachnumber/boolfalseShow dots each x item.
dotDataboolfalseUsed by data-dot content.
lazyLoadboolfalseLazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not \<img>
lazyContentboolfalselazyContent 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.
autoplayboolfalseAutoplay.
autoplayTimeoutnumber5000Autoplay interval timeout.
autoplayHoverPauseboolfalsePause on mouse hover.
smartSpeednumber250Speed Calculate. More info to come..
fluidSpeednumberSpeed Calculate. More info to come..
autoplaySpeednumber/boolfalseautoplay speed.
navSpeednumber/boolfalseNavigation speed.
dotsSpeednumber/boolPagination speed.
dragEndSpeednumber/boolfalseDrag end speed.
callbacksbooltrueEnable callback events.
responsiveobjectempty objectObject containing responsive options. Can be set to false to remove responsive capabilities.
responsiveRefreshRatenumber200Responsive refresh rate.
responsiveBaseElementdom elementwindowSet 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.
videoboolfalseEnable fetching YouTube/Vimeo/Vzaar videos.
videoHeightnumber/boolfalseSet height for videos.
videoWidthnumber/boolfalseSet width for videos.
animateOutstring/boolfalseClass for CSS3 animation out.
animateInstring/boolfalseClass for CSS3 animation in.
fallbackEasingstringswingEasing for CSS2 $.animate.
infofunctionfalseCallback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.
nestedItemSelectorstringfalseUse it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name.
itemElementstring'div'DOM element type for owl-item.
stageElementstring'div'DOM element type for owl-stage.
navContainerstring/boolfalseSet your own container for nav.
dotsContainerstring/boolfalseSet your own container for dots.