javascript - 光滑的 slider 点和其他 Div 之间的额外空间

Question

我正在使用光滑的 slider 。 slider 在 slider 下方占用额外的空白空间。当我使用 Chrome Dev Tools 检查时，我发现这是因为光滑 slider 的点。我已经为这些点添加了自定义样式。不明白为什么我会遇到这个问题!这是我的 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,

            });

        });

Answer 1

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

1. <h3>在 <section id="donate">有一个 margin-top
2. <section class="slider">有一个 margin-bottom
3. <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;
} 

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