npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-owl-carousel3

v2.2.5

Published

React.js + Owl Carousel

Downloads

2,635

Readme

react-owl-carousel npm version

React + Owl Carousel 2.2

1.Getting Started

import React from 'react';
import OwlCarousel from 'react-owl-carousel';

2.Set up your javascript

wrap your divs inside the OwlCarousel component

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

className "owl-theme" is optional

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()
  •   destory()
  •   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. |