如何在React中让owl-carousel响应？
如何在React中让owl-carousel响应？
提问于 2017-09-07 12:59:42
我正在使用react-owl-carousel包。
https://www.npmjs.com/package/react-owl-carousel
我已经按照指令成功地实现了代码，并且轮播运行得很顺利。
问题:目前我同时显示4个项目。在每个屏幕上，这4个项目都会出现。对于768px到1200px的设备，我希望显示3项；对于500px到767px的设备，我希望显示2项；对于499px以下的设备，我希望显示1项。
owl carousel文档中提供了包含"responsive“的选项。但我想知道如何包含它来实现同样的目标。
以下是我到目前为止所做的工作。
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;回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-07 13:10:10
您必须使用OwlCarousel选项responsive。
请查看here的owlcarousel2接口选项官方文档。
例如，对您的项状态使用以下选项。
options:{
loop: true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
},请检查演示示例到here。
希望这能对你有所帮助。
Stack Overflow用户
发布于 2020-02-06 13:08:02
你可以跟着-
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46088145
复制相关文章
相似问题