在網頁中使用光滑滑塊后出現水平滾動條

Question

我正在使用 slick 創建一個滑塊。 當我在光滑的容器內使用兩個 div 標簽時，水平滾動條沒有出現。 但是當我在 slick 中使用兩個以上的 div 時，就會出現水平滾動條。 我已將流暢的代碼放入容器流體中。

Html code

<section class="bg-white py-5">
            <div class="container-fluid">
                <div class="cust-slider">
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
          </div>
</section>

JavaScript

 $('.cust-slider').slick({
            dots: true,
            infinite: false,
            speed: 300,
            slidesToShow: 2,
            slidesToScroll: 1,
            responsive: [{
                breakpoint: 1000,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: true
                }
            }, {
                breakpoint: 860,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }, {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }]
        }, {
            autoplay: true,
            autoplaySpeed: 6000,
        });

Image在這里查看圖片

Answer 1

您可能需要覆蓋 slick-theme.css 規則。

目前，您將擁有光滑控件的默認樣式規則，如下所示：

.slick-next {
  right: -25px;
}

如果您使用瀏覽器開發人員工具刪除它，您將看到滾動條將消失。 目前它推出了布局。

或者，如果您不打算使用“下一個”和“上一個”控件，您可以使用以下內容完全省略它們：

$('.cust-slider').slick({
  arrows: false,
  ....