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

问题描述

我正在使用光滑的滑块。当我在光滑容器内使用两个div标签时，水平滚动条无法显示。但是，当我在光滑的区域内使用两个以上的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,infinite: true,dots: true
                }
            },{
                breakpoint: 860,settings: {
                    slidesToShow: 1,slidesToScroll: 1
                }
            },{
                breakpoint: 480,slidesToScroll: 1
                }
            }]
        },{
            autoplay: true,autoplaySpeed: 6000,});

Image See image here

解决方法

您可能需要覆盖slick-theme.css规则。

此刻，您将具有如下所示的光滑控件的默认样式规则：

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

如果使用浏览器开发人员工具删除它，您将看到滚动条将消失。此刻，它推出了布局。

或者，如果您不打算使用“下一个”和“上一个”控件，则可以完全不显示以下内容：

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