如何在 React Owl Carousel 中使用 owl carousel 选项？

Question

我是 React JS 的新手。我尝试在 React 中使用 owl 轮播。

我从 npm 安装的包 link 是

https://www.npmjs.com/package/react-owl-carousel

按照指示，我在特定页面上导入了 Owl 轮播组件。这是代码：

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 轮播中的默认值）。我想到我可以用 4 初始化值，因此尝试了，

const options = {
    items: 4,
};

但它不起作用。它的节点包中也没有提到任何内容。任何人都知道如何在 React Owl 轮播中使用 owl 轮播选项？

此外，我想为 768px 到 1200px 之间的设备显示 3 个项目，为 500px 到 767px 之间的设备显示 2 个项目，为 499px 以下的设备显示 1 个项目。

这是正常的 owl 轮播如何使用选项来添加响应。 https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

如何在 React owl 轮播中实现同样的效果？

Answer 1

您需要将 options 对象添加到 OwlCarousel 组件。

示例：

<OwlCarousel margin={10} items={4} > 
    //...
</OwlCarouse>

或

<OwlCarousel margin={10} {...options} >
    //...
</OwlCarouse>

Answer 2

最好的你可以使用：

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

如何在 React Owl Carousel 中使用 owl carousel 选项？

How to use owl carousel options in React Owl Carousel?

reactjs

owl-carousel-2