光滑滑块点和其他 div 之间的额外空间答案

【问题标题】：Extra Space Between Slick Slider Dots and Other Divs光滑滑块点和其他 div 之间的额外空间
【发布时间】：2019-03-21 01:32:10
【问题描述】：

我正在使用光滑的滑块。滑块在滑块下方占用了额外的空白空间。当我使用 Chrome 开发工具检查时，我发现这是因为光滑滑块的点。我在点上添加了自定义样式。不明白为什么我会面临这个问题！这是我的 Codepen 链接https://codepen.io/nemo011/pen/aMRJZK

<section class="slider">
    <div class="slide">
        <img src="https://via.placeholder.com/1680x720">
        <h2>text 1</h2>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/1680x720">
        <h2>text 2</h2>
    </div>
    <div class="slide">
        <img src="https://via.placeholder.com/1680x720">
        <h2>Lets see</h2>
    </div>
</section>

<section id="donate">
    <div class="container">
        <h3>Help Us to Make a Change</h3>
        <div class="btn-dark">Donate</div>
    </div>
</section>

CSS 样式

 h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-80%, -80%);
    color: white;
    font-size: 46px;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    text-transform: uppercase;
}

.slide {
    position: relative;
    overflow: hidden;
}

.slide img{
    margin: 0;
    max-width: 100vw;
}

.slick-dots {
    top: 90%;
    list-style-type: none;
}
.slick-dots li{
    margin: 0 0.25rem;
}

.slick-dots li button {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;

    border: none;
    border-radius: 100%;
    background-color: white!important;

    text-indent: -9999px;
}
.slick-dots li button:hover{
    background-color: #2f638b!important;
}
.slick-dots li.slick-active button{
    border: 3px solid white!important;
    background-color: transparent!important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .slick-dots {
        top: 90%;
        list-style-type: none;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .slick-dots {
        top: 85%;
        list-style-type: none;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .slick-dots {
        top: 70%;
        list-style-type: none;
    }
}

/* Donate Bar Section #donate */
#donate {
    margin: 0;
    padding: 0;
    background-color: #2f638b;
}

Javascript

$(document).ready(function () {
            $('.slider').slick({
                autoplay: true,
                infinite: true,
                //              centerMode: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                //              centerPadding: '220px',
                dots: true,
                dotsClass: 'slick-dots',
                fade: true,

            });

        });

【问题讨论】：

标签： javascript html css slick.js

【解决方案1】：

有 3 个元素的样式导致了差距。

<section id="donate"> 中的<h3> 有一个margin-top
<section class="slider"> 有一个margin-bottom
<ul class="slick-dots"> 定义了 bottom 和 top。

这些样式是从正在加载的名为 slick-theme.css 的外部 css 文件应用的

因此，请将以下内容粘贴到样式表的末尾。

section#donate h3{
  margin-top: 0;
}

ul.slick-dots{
  bottom: 0;
}

section.slick-dotted.slick-slider{
  margin-bottom:0;
}

并根据需要修改section.slick-dotted.slick-slider的margin-bottom以获得空间。

【讨论】：

解决了这个问题。感谢您打破每一个部分并帮助我轻松理解。

【解决方案2】：

修改了一点你的.slick-dots 风格：

.slick-dots {
    position: absolute;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 0px;
    list-style: none;
    list-style-type: none;
    text-align: center;
    margin-top: 40px;
}

这在滑块下方提供了额外的空白：

.slick-dotted.slick-slider {
    margin-bottom: 30px; /* Should be removed */ 
}

h3 标签通常也会给出margin-top 的值，因此您可以通过以下方式摆脱它：

.container h3 {
  margin-top: 0;
}

【讨论】：

谢谢！解决了这个问题。