React Owl Carousal 响应不起作用

问题描述

我的网站上几乎没有猫头鹰狂欢。但在响应式屏幕中任何东西都不起作用。以下是我的旋转木马代码之一。

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

mobile screen medium screen full screen

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）