React Owl Carousel 响应式无法在较小的屏幕上工作答案

【问题标题】：React Owl Carousal responsive not working in smaller screensReact Owl Carousel 响应式无法在较小的屏幕上工作
【发布时间】：2021-07-20 09:51:11
【问题描述】：

My Owl 轮播在较小或移动屏幕上没有响应。我想找到解决这个问题的方法。以下是截图：

这是代码。提前致谢

    export default function HomeMovieSlider() {
  
    return (
  <div>
    <OwlCarousel className='owl-theme'
    loop center margin={1} autoplay ={true} dots={false} items={3} touchDrag={true} lazyLoad={true} 
    
    // responsive={"0:{items:1,},600:{items:3,},1000:{items:5,}"}
    animateOut={'fadeOut'} animateIn={'flipInX'}>
    {MOVIEBANNER.map((movieBannertop) => {
        return (
            <div  >
                {/* <h4>{movieBannerp.movieTitle}</h4> */}
                {/* <img src={movieBannertop.bannerImage}/> */}
                <Card style={{width: "250px"}}> 
                    <Card.Img variant="top" src={movieBannertop.bannerImage} height="380" max-width= "100% !important"/>
                    <Card.Body> 
                      <Card.Title as="h6" ><b>{movieBannertop.movieTitle}</b></Card.Title>
                      <Card.Subtitle className="mb-2 text-muted">{movieBannertop.genres}</Card.Subtitle>
                      <Link to="/MovieDetail"><small className="text-muted">More Details</small></Link>
                    </Card.Body>
                    <Card.Footer className="text-center">
                      
                      <Button variant="danger" style={{backgroundColor: "#ff4444"}}><Link to="/movieBooking" style={{color: "#fff"}}>Book Now</Link></Button>
                    </Card.Footer> 
                  </Card> 
            </div>  
        );
      })}
    </OwlCarousel>
    <div className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12"></div>
    <div className="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
    <div className="prs_animate_btn1 prs_upcom_main_wrapper prs_third_slider_btn">
      <ul>
        <li data-animation="animated fadeInUp"><a href="/#/movies" className="button button--tamaya prs_upcom_main_btn" data-text="MORE"><span>MORE</span></a>
        </li>
      </ul>
    </div>
    </div>
    <div className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12"></div>
  </div>
    );
  }

【问题讨论】：

能分享一下沙箱或stackbiltz中的可执行代码吗？
@MajidMohammadi 我一直在尝试放入 stackbiltz，但它给了我一个错误。 stackblitz.com/edit/react-tkxqkw?file=src/slider.js请检查是否可以
Foneska react-owl-carousel 好像有问题。
@MajidMohammadi 有什么建议吗？？
Foneska 我应该在codesandbox中尝试一下并找出问题所在。

标签： reactjs responsive-design owl-carousel

【解决方案1】：

为了使owl-carousel 具有响应性，您应该创建一个名为state 的对象，该对象具有responsive 属性并将其发送到responsive 的responsive 属性OwlCarousel。

export default function HomeMovieSlider() {
    const state= {
        responsive:{
            0: {
                items: 1,
            },
            450: {
                items: 2,
            },
            600: {
                items: 3,
            },
            1000: {
                items: 4,
            },
        },
    }
  return (
    <div>
      <OwlCarousel
        className="owl-theme"
        loop
        center
        margin={1}
        autoplay={true}
        dots={false}
        items={3}
        touchDrag={true}
        lazyLoad={true}
         responsive={state.responsive}// add this line
        animateOut={'fadeOut'}
        animateIn={'flipInX'}
      >
        {MOVIEBANNER.map(movieBannertop => {
          return (
            <div>
              {/* <h4>{movieBannerp.movieTitle}</h4> */}
              {/* <img src={movieBannertop.bannerImage}/> */}
              <Card style={{ width: '250px' }}>
                <Card.Img
                  variant="top"
                  src={movieBannertop.bannerImage}
                  height="380"
                  max-width="100% !important"
                />
                <Card.Body>
                  <Card.Title as="h6">
                    <b>{movieBannertop.movieTitle}</b>
                  </Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">
                    {movieBannertop.genres}
                  </Card.Subtitle>
                  <Link to="/MovieDetail">
                    <small className="text-muted">More Details</small>
                  </Link>
                </Card.Body>
                <Card.Footer className="text-center">
                  <Button
                    variant="danger"
                    style={{ backgroundColor: '#ff4444' }}
                  >
                    <Link to="/movieBooking" style={{ color: '#fff' }}>
                      Book Now
                    </Link>
                  </Button>
                </Card.Footer>
              </Card>
            </div>
          );
        })}
      </OwlCarousel>       
  );
}

对于其他owl-carousels API，请参阅此链接：https://github.com/laurenchen0631/react-owl-carousel

【讨论】：