网页使用滑动滑块后出现水平滚动条

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,
  ....

Answer 2

const settings = {
   arrows: false,
    ...
 };

在光滑的设置上使属性

arrows

false 对我有用。我认为滚动条是由应该显示的左右箭头创建的。