光滑滑块点和其他 Div 之间的额外 Space

Question

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

<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得到space。

Answer 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;
}

这会在滑块下提供额外的白色 space：

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

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

.container h3 {
  margin-top: 0;
}

光滑滑块点和其他 Div 之间的额外 Space

Extra Space Between Slick Slider Dots and Other Divs

html

javascript

css

slick.js