[英]Wrong width for React Slick Slider in Responsive View
我已經為我的網站實現了React Slick Slider,它適用於桌面視圖並相應地采用適當的寬度,但如果我切換到響應式視圖,容器的寬度不正確,它看起來都是扭曲的。
我試圖用CSS修復它,給予slick-track
div 100%的寬度,但沒有任何效果。
以下是容器:光滑軌道,下面是添加的內聯css:
width: 2.14748e+08px;
opacity: 1;
transform: translate3d(-8.05305e+07px, 0px, 0px);
以下是我在組件中初始化滑塊的方法:
const settings = {
dots: false,
infinite: true,
speed: 500,
cssEase: 'linear',
slidesToShow: this.props.data && this.props.data.upSell && this.props.data.upSell.length>=5?6:this.props.data&& this.props.data.upSell && this.props.data.upSell.length,
rtl: rtl === "en" ? false : true,
slidesToScroll: 1,
asNavFor: null,
arrows: false,
initialSlide: rtl==="en"?0:2,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
initialSlide: rtl==="en"?0:3,
dots: false
}
}
]
};
下面是循環中的示例HTML結構:
<Slider className="mx-4" {...settings} ref={c => (this.slider = c)}>
<div class="rtl product-item" tabindex="-1" style="width: 100%; display: inline-block;">
<div class="product-shop-top">
<a href="#"><img src="" alt="" class="product-img"></a>
</div>
<div class="product-item-details">
<h5><a href="#">Product Name</a></h5>
<div class="price-wrapper">
<div class="price-box"><span class="special-price">65</span></div>
</div>
</div>
<div class="buynow-block asas"><button type="button" title="Add to Cart" class="action tocart primary"> </button><a class="towishlist">Add to Wishlist</a></div>
</div>
</Slider>
我希望連續2列用於響應光滑滑塊。
最后我能夠找出問題,滑塊的容器位於頁面上其他元素所在的同一行內,這導致了滑塊無法計算寬度的問題。 之前的結構是這樣的:
<div classname="row">
<div classname="elementone"></div>
<div classname="elementtwo"></div>
<div classname="slider"></div>
</div>
所以我把滑塊移到了行外面,現在工作正常。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.