如何解决在网页中使用滑动滑块后出现水平滚动条
我正在使用光滑的滑块。当我在光滑容器内使用两个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,....
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。