Question

我已经为我的网站实现了React Slick Slider，它适用于桌面视图，并相应地采用了适当的宽度，但是如果我切换到响应视图，则容器的宽度不合适，并且看起来所有变形。

我已经尝试使用CSS修复它，因为slick-track div的宽度为100％，但是没有任何效果。

以下是容器：slick-track，下面是要添加的嵌入式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列用于响应式滑条。

Answer 1

最后，我能够找出问题所在，滑块的容器位于页面上其他元素所在的同一行内，这导致滑块无法计算宽度的问题。之前的结构是这样的：

0.59.1

所以我已经将滑块移到了行的外面，现在工作正常。

响应视图中React Slick滑块的宽度错误

1 个答案: