[英]How to responsive owl carousel in react js
我只想在移動視圖中顯示一項。 但它顯示了我在桌面視圖中顯示的 4 個項目,請幫幫我。
這是我的代碼:-
<div className="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<OwlCarousel className="owl-theme hotel-slider tab-slide" id="tab-slider" loop margin={10} items={4} nav>
{Data.shimladetail.map((shimlatour, i) => (
<div className="item no-brdr">
<img src={shimlatour.alltourimg} className="tour-img" />
<div className="tour-cntnt">
<h5 className="tours-heading">{shimlatour.alltourtitle}</h5>
<p className="tour-pera">{shimlatour.alltourdiscription}</p>
</div>
</div>
))}
</OwlCarousel>
</div>
嘗試使用插件事件,如onResize
&& onResized
或選項如mergeFit
&& autoWidth
,您可以在下面的鏈接中找到此選項:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.