reactjs - 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 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>
);
}
解决方案
为了做出owl-carousel
响应,您应该创建一个以属性命名的对象并将state
其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-carousel
的 API,请参阅此链接:https ://github.com/laurenchen0631/react-owl-carousel
推荐阅读
- security - Asterisk 上的 SRTP
- python - 我们如何在 Airflow 中导入 dag?
- docker - 在 dockerd 参数中设置 -H tcp://XXXX:2375 后无法连接到 Docker 守护进程
- pipe - xargs: tar: 由信号 13 终止
- loops - 使用 v-for 循环时,文本字段彼此相邻而不是彼此下方
- c# - 在.net core 2.2中更新模型的正确方法,而不会通过隐藏字段出现任何安全问题
- batch-processing - 在几行上批处理 tslint
- javascript - 注销图标 avec DrawerNavigation (react native)
- jquery - 不重定向的 IE 和 Edge 的 Href 问题
- reactjs - 将带有嵌套类的 css 转换为样式化组件问题