How to use owl carousel options in React Owl Carousel?
Solution 1
You need to add options
object to OwlCarousel
component.
Example:
<OwlCarousel margin={10} items={4} >
//...
</OwlCarouse>
OR
<OwlCarousel margin={10} {...options} >
//...
</OwlCarouse>
Solution 2
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>
)
![Swapna](https://i.stack.imgur.com/lNFRw.png?s=256&g=1)
Comments
-
Swapna about 2 years
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 ?
-
bennygenel almost 7 yearsyou are not adding the option object to OwlCarousel Component.
-
Swapna almost 7 yearsAnu suggestions to How to add it ?
-
bennygenel almost 7 years
<OwlCarousel margin={10} items={4} >
or<OwlCarousel margin={10} {...options} >
-
bennygenel almost 7 yearsCheck the docs for responsiveClass
-
Swapna almost 7 yearsresponsiveClass is not much help. I would rather like to use Owl Carousel option "responsive" .
-
bennygenel almost 7 yearsYou can use responsive too. Its same as the official docs.
-
-
Swapna almost 7 yearsA small help further please : Want to add responsive option for different break point ? Any suggestions ? or want me to create a separate question ?
-
bennygenel almost 7 yearsyou 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<OwlCarousel margin={10} {...this.state.options} >
. If you explain it a little bit more I can update my answer. -
Swapna almost 7 yearsEdited question.