react-owl-carousel2

0.3.0 • Public • Published

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

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: [&#x27;next&#x27;,&#x27;prev&#x27;]

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.

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.


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

Package Sidebar

Install

npm i react-owl-carousel2

Weekly Downloads

2,599

Version

0.3.0

License

ISC

Last publish

Collaborators

  • florinn