How to make owl-carousel responsive in React?

Question

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;

Answer 1

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.

Answer 2

You can make owl-carousel responsive in React like this explained bellow: Step 1: you need to create state in same component where you want owl-carousel.... Like you have slider.js component so you have to create state in same file ..Like this;

Step 2: And the state you created initialize in responsive property in owl-carousel

import OwlCarousel from 'react-owl-carousel';
import $ from 'jquery';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

class Slider extends Component {
    state= {
        responsive:{
            0: {
                items: 1,
            },
            450: {
                items: 2,
            },
            600: {
                items: 3,
            },
            1000: {
                items: 4,
            },
        },
    }
    render() {
        return (<OwlCarousel className={'owl-theme'}
    loop={true}
    margin={10}
    nav={true}
    dots={false}
    autoplay={true}
    autoplayTimeout={2000}
    items={4}
    responsive={this.state.responsive} >
    
    <div className={'item'}>
      Item 1
    </div>
    <div className={'item'}>
      Item 2
    </div>
    <div className={'item'}>
      Item 3
    </div>
    <div className={'item'}>
      Item 4
    </div>
    <div className={'item'}>
      Item 5
    </div>
    </OwlCarousel>

Answer 3

You can follow -

import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';

const options = {
    margin: 30,
    responsiveClass: true,
    nav: true,
    dots: false,
    autoplay: false,
    navText: ["Prev", "Next"],
    smartSpeed: 1000,
    responsive: {
        0: {
            items: 1,
        },
        400: {
            items: 1,
        },
        600: {
            items: 2,
        },
        700: {
            items: 3,
        },
        1000: {
            items: 5,

        }
    },
};

class Slider extends Component {
   render() {
        return (
            <div>
                <OwlCarousel className="slider-items owl-carousel" {...options}>
                ...
                </OwlCarousel>
            </div>
        );
    }
}

export default Slider;

Answer 4

I was getting a type error in typescript, here is the version without type error :

<OwlCarousel 
            mouseDrag= {false} touchDrag={true}
            stagePadding={0} margin={0} autoplay ={true} merge={true} nav dots={true} slideBy={2} dotsEach={1} loop={true}
            responsive= {
                {
                    '1':{
                        items: 1
                    },
                    '1025': {
                        items: 2
                    }
                }
                
            }
            
            >  
            {reviews} 
        </OwlCarousel>  

hope it helps : )

Answer 5

Not only you can make responsive items but other elements as well. Here, I hide the nav(arrows) on mobile but show it on larger device. navText contains your custom arrow, I used react-icons.

import ReactOwlCarousel from "react-owl-carousel";

//owl theme css
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";

// owl elements
<div className="row">
      {services?.length && (
          <ReactOwlCarousel
             items={2}
             margin={50}
             loop={true}
             nav={true}
             responsiveClass={true}
             responsive={{
              '0': { items: 1, nav: false },
              '768': { items: 2, nav: false },
              '990': { nav: true },
             }}
             navText={[
               '<i class="las la-arrow-left"></i>',
               '<i class="las la-arrow-right"></i>',
             ]}
             dots={false}
             className="service-slider-two owl-carousel"
             >
              {services?.length > 0 &&
                services?.map((service) => (
                  <div key={service?.id} className="single-service-wrap">
                    <div className="service-icon">
                       <img src={service?.img} alt="" />
                    </div>
                    <h3 className="text-white">{service?.title}</h3>
                    <p className="text-white">{service?.description}</p>
             </div>
          ))}
       </ReactOwlCarousel>
      )}
 </div>