Question

我正在使用光滑的滑块。滑块在滑块下方占用了额外的空白。当我使用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,

            });

        });

Answer 1

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

<h3>中的<section id="donate">有一个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;
}

并修改margin-bottom中的section.slick-dotted.slick-slider，以获取所需的空格。

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

这会在滑块下方留出额外的空白：

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

此外，h3标记通常提供margin-top的值，因此您可以通过以下方法消除它：

.container h3 {
  margin-top: 0;
}

滑点和其他Divs之间的额外空间

2 个答案: