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

【问题标题】：Horizontal scroll bar is appearing after using slick slider in the webpage在网页中使用光滑的滑块后出现水平滚动条
【发布时间】：2020-10-21 07:49:44
【问题描述】：

我正在使用 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 See image here

【问题讨论】：

标签： javascript css twitter-bootstrap slick.js

【解决方案1】：

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

目前，您将拥有光滑控件的默认样式规则，如下所示：

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

如果您使用浏览器开发人员工具将其删除，您将看到滚动条消失。目前它正在推出布局。

或者，如果您不打算使用“下一个”和“上一个”控件，您可以将它们从显示中完全省略，如下所示：

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

【讨论】：