react-owl-carousel2
Advanced tools
Readme
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.
<button onClick={() => this.refs.car.prev()}>prev</button>
<button onClick={() => this.refs.car.next()}>next</button>
<button onClick={() => this.refs.car.goTo(0)}>goTo</button>
FAQs
React.js + Owl Carousel 2
The npm package react-owl-carousel2 receives a total of 1,613 weekly downloads. As such, react-owl-carousel2 popularity was classified as popular.
We found that react-owl-carousel2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.