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

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 See image here

Answer 1

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

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

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

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

或者，如果您不打算使用“下一个”和“上一个”控件，则可以将它们与以下内容一起省略显示：

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

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

Horizontal scroll bar is appearing after using slick slider in the webpage

javascript

css

twitter-bootstrap

slick.js