How to make owl-carousel responsive in React? - reactjs

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

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