如何在 React 中使 owl-carousel 响应？答案

【问题标题】：How to make owl-carousel responsive in React?如何在 React 中使 owl-carousel 响应？
【发布时间】：2017-09-07 04:59:42
【问题描述】：

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

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

我已经按照说明成功实现了代码，轮播运行流畅。

问题：目前我同时显示 4 个项目。而在每一个画面中，都会出现这4项。而不是 4 ，我想为 768px 到 1200px 之间的设备显示 3 个项目，在 500px 到 767px 之间显示 2 个项目，为 499px 以下的设备显示 1 个项目。

owl carousel doc 中有包含“响应式”的选项。但我想知道如何包含它以实现相同的目标。

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

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;

【问题讨论】：

标签： reactjs owl-carousel-2

【解决方案1】：

您必须使用 OwlCarousel Options responsive。

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

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

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

请查看演示示例到here。

希望这会对你有所帮助。

【讨论】：

能否请您更新完整示例意味着如何将此选项对象与组件一起使用

【解决方案2】：

你可以关注——


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;

【讨论】：

【解决方案3】：

您可以在 React 中使 owl-carousel 响应式，如下所述：第 1 步：您需要在您想要 owl-carousel...的同一组件中创建 state。就像你有 slider.js 组件一样，你必须在同一个文件中创建 state ..像这样；

第 2 步：您创建的状态在 owl-carousel 的响应属性中初始化

import OwlCarousel from 'react-owl-carousel';
import $ from 'jquery';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

class Slider extends Component {
    state= {
        responsive:{
            0: {
                items: 1,
            },
            450: {
                items: 2,
            },
            600: {
                items: 3,
            },
            1000: {
                items: 4,
            },
        },
    }
    render() {
        return (<OwlCarousel className={'owl-theme'}
    loop={true}
    margin={10}
    nav={true}
    dots={false}
    autoplay={true}
    autoplayTimeout={2000}
    items={4}
    responsive={this.state.responsive} >
    
    <div className={'item'}>
      Item 1
    </div>
    <div className={'item'}>
      Item 2
    </div>
    <div className={'item'}>
      Item 3
    </div>
    <div className={'item'}>
      Item 4
    </div>
    <div className={'item'}>
      Item 5
    </div>
    </OwlCarousel>

【讨论】：