reactjsowl-carousel-2

How to make owl-carousel responsive in React?


I am using react-owl-carousel package.

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

I have successfully implemented the code as instructed and the carousel is running smoothly.

Problem : Currently I am displaying 4 items simultaneously. And in every screen , these 4 items are coming . Instead of 4 , 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.

The option of including "responsive" is there in owl carousel doc. But I am wondering How to include it to achieve the same.

Here is what I have done so far.

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;

Solution

  • You have to use OwlCarousel Options responsive.

    Please check official documentation of owlcarousel2 API options to here.

    For example use following options for your items state.

            options:{
                    loop: true,
                    margin:10,
                    nav:true,
                    responsive:{
                        0:{
                            items:1
                        },
                        600:{
                            items:3
                        },
                        1000:{
                            items:5
                        }
                    }
                },
    

    Please check demo example to here.

    Hope this will help you.