Argthtjtr

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 need to add options object to OwlCarousel component.

Example:

<OwlCarousel margin={10} items={4} > 

    //...

</OwlCarouse>

OR

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

    //...

</OwlCarouse>

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>

)