reactjs 如何让猫头鹰旋转木马在React中响应？

ctehm74n 于 2023-02-08 发布在 React

关注(0)|答案(4)|浏览(149)

我正在使用React猫头鹰旋转木马包。
https://www.npmjs.com/package/react-owl-carousel
我已经按照指示成功地实现了代码，carousel运行得很顺利。
问题：目前我同时显示4个项目。在每个屏幕中，这4个项目即将到来。而不是4个，我想显示3个项目的设备之间的768px到1200px，2个项目之间的500px到767px和1个项目的设备低于499px。
包括“响应”的选项在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

来源：https://stackoverflow.com/questions/46088145/how-to-make-owl-carousel-responsive-in-react

4条答案

按热度按时间

ldxq2e6h1#

您必须使用猫头鹰旋转木马选项responsive。
请查看here的owlcarousel2 API选项官方文档。
例如，使用以下选项设置项目状态。

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

请检查here的演示示例。
希望这对你有帮助。

赞(0）回复(0）举报 2023-02-08

ct2axkht2#

你可以跟着-

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;

赞(0）回复(0）举报 2023-02-08

pbpqsu0x3#

你可以让owl-carousel在React中响应如下：第1步：你需要在你想要owl-carousel的同一个组件中创建state......就像你有slider.js组件一样，所以你必须在同一个文件中创建state......就像这样;
第2步：在owl-carousel的responsive属性中初始化您创建的状态

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>

赞(0）回复(0）举报 2023-02-08

xwbd5t1u4#

我在typescript中遇到了一个类型错误，下面是没有类型错误的版本：

<OwlCarousel 
            mouseDrag= {false} touchDrag={true}
            stagePadding={0} margin={0} autoplay ={true} merge={true} nav dots={true} slideBy={2} dotsEach={1} loop={true}
            responsive= {
                {
                    '1':{
                        items: 1
                    },
                    '1025': {
                        items: 2
                    }
                }
                
            }
            
            >  
            {reviews} 
        </OwlCarousel>

希望能有所帮助：）

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs 如何让猫头鹰旋转木马在React中响应？

4条答案

相关问题

热门标签

最新问答