reactjs - 如何在 React 中使 owl-carousel 响应式？

Question

我正在使用react-owl-carousel包。

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

我已经按照指示成功实现了代码，并且轮播运行顺利。

问题:目前我同时显示 4 个项目。并且在每个屏幕中，都会出现这 4 项。我想为 768px 到 1200px 之间的设备显示 3 个项目，而不是 4 个项目，为 500px 到 767px 之间的设备显示 2 个项目，为低于 499px 的设备显示 1 个项目。

猫头鹰轮播文档中包含“响应式”选项。但我想知道如何将其包含在内以实现相同的目标。

这是我到目前为止所做的事情。

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

您必须使用 OwlCarousel 选项响应式。

请查看owlcarousel2官方文档API 选项 here 。

例如，为您的项目状态使用以下选项。

        options:{
                loop: true,
                margin:10,
                nav:true,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:3
                    },
                    1000:{
                        items:5
                    }
                }
            },

请查看演示示例 here .

希望这对您有帮助。