如何解决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 举报,一经查实,本站将立刻删除。