How to use owl carousel options in React Owl Carousel?

Question

I am new to React JS. I have tried to use owl carousel in React.

The package link I installed from npm is

https://www.npmjs.com/package/react-owl-carousel

As instructed I have imported Owl Carousel component on specific page. Here is the code:

import React, { Component } from 'react';
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap';
import UserAvtar from '../common/UserAvtar.js';
import SectionHeaderOfCards  from '../common/SectionHeaderOfCards.js';
import OwlCarousel from 'react-owl-carousel';

const options = {
    items: 4,
};

class DashboardPage extends Component {
  render() {
    return (
      <div>
          <section className="has-small__padding has-grey__bg">
              <UserAvtar />
          </section>
          <section className="has-small__padding">
              <Grid>
                  <SectionHeaderOfCards title="Recommended Matches" />
                  <OwlCarousel margin={10} >
                      <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>
                  </OwlCarousel>
              </Grid>
          </section>
      </div>
    );
  }
}

export default DashboardPage;

As default This code outputs 3 items at a time (As 3 is the default value in owl carousel) . I thought of I may initialised the value with 4 , hence tried ,

const options = {
    items: 4,
};

But it's not working. There is nothing mentioned in its node package either. Anyone knows how to use owl carousel options in React Owl carousel ?

Apart I want to show 3 items for devices between 768px to 1200px , 2 items between 500px to 767px and 1 item for the devices below 499px.

Here is how normal owl carousel use the option to add responsiveness. https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

How to achieve the same in React owl carousel ?

you are not adding the option object to OwlCarousel Component. — bennygenel, Sep 06 '17 at 10:38
Check the docs for [responsiveClass](https://github.com/seal789ie/react-owl-carousel#owlcarousel-class-props) — bennygenel, Sep 06 '17 at 11:05
responsiveClass is not much help. I would rather like to use Owl Carousel option "responsive" . — Swapna, Sep 06 '17 at 12:19
You can use [responsive](https://github.com/seal789ie/react-owl-carousel#owlcarousel-options) too. Its same as the official docs. — bennygenel, Sep 06 '17 at 12:23

score 9 · Accepted Answer · answered Sep 06 '17 at 10:52

9

You need to add options object to OwlCarousel component.

Example:

<OwlCarousel margin={10} items={4} > 
    //...
</OwlCarouse>

OR

<OwlCarousel margin={10} {...options} >
    //...
</OwlCarouse>

answered Sep 06 '17 at 10:52

bennygenel

23,896
6
65
78

A small help further please : Want to add responsive option for different break point ? Any suggestions ? or want me to create a separate question ? – Swapna Sep 06 '17 at 10:55
you can create a state object with the default values for the `options` and then update the state with the desired way of yours. this way you can set the options like this ``. If you explain it a little bit more I can update my answer. – bennygenel Sep 06 '17 at 10:58
Edited question. – Swapna Sep 06 '17 at 11:03

score 1 · Answer 2 · answered Nov 23 '18 at 11:36

Best you can use:

render() {
    const options = {
      items: 1,
      nav: true,
      navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
      rewind: true,
      autoplay: true,
      slideBy: 1,
      dots: true,
      dotsEach: true,
      dotData: true
    };

    return (
<OwlCarousel ref="gallery" options={options}>
          ...
        </OwlCarousel>
)

How to use owl carousel options in React Owl Carousel?

2 Answers2