我是 React JS 新手。我尝试过在 React 中使用 owl carousel。
我从npm安装的包链接是
https://www.npmjs.com/package/react-owl-carousel
按照指示,我已在特定页面上导入了 Owl Carousel 组件。这是代码:
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;
作为默认值此代码一次输出 3 个项目(作为 3 是 owl carousel 中的默认值)。我想我可以用 4 初始化该值,因此尝试了,
const options = {
items: 4,
};
但是它不起作用。它的节点包中也没有提及任何内容。有人知道如何在 React Owl carousel 中使用 owl carousel 选项吗?
此外,我想为 768px 到 1200px 之间的设备显示 3 个项目,为 500px 到 767px 之间的设备显示 2 个项目,为低于 499px 的设备显示 1 个项目。
以下是普通猫头鹰轮播如何使用该选项来添加响应能力。 https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
如何在 React owl carousel 中实现相同的效果?
最佳答案
您需要将 options
对象添加到 OwlCarousel
组件。
示例:
<OwlCarousel margin={10} items={4} >
//...
</OwlCarouse>
或
<OwlCarousel margin={10} {...options} >
//...
</OwlCarouse>
关于reactjs - 如何在 React Owl Carousel 中使用 owl carousel 选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46073041/