Question

当尝试使滑动条响应时，我在内容/滑动元素和无法删除的点之间出现空格问题。全屏查看页面时（无响应视图），点消失了（我知道为什么，这很好），空格消失了，但是我的箭头在内容中。这是一张图片（N＆O是箭头，css暂时丢失）：

空白问题：

箭头问题：

HTML代码：

<section class="o-container u-mt-x2 u-bgcolor-white">
            <div class="o-grid">
                <div class="o-grid__col u-12/12">
                    <section class="o-container u-mt-x12">
                        <div class="c-card u-mb-x0">
                            <div class="o-container">
                                <div class="o-grid">
                                    <div class="o-grid__col u-12/12 u-12/12@lg u-mb-x6 u-text-center"><h2
                                                class=" u-text-center u-color-blue">Weitere Funktionen fur Anbieter</h2>
                                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                                            eirmod.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="o-grid__col u-12/12 u-mb-x6 o-grid--equal-height">
                                <div class="c-funcslider slick-slider">
                                    <div style="height: 328px; text-align: center;">
                                        <div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
                                             style="display: inline-block;">
                                            <div class="c-card__body u-pt-x5 u-p-x5">
                                                <h4 class="h4">Logenplätze buchen</h4>
                                                <p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
                                                    sadipscing elitr, sed diam
                                                    nonumy
                                                    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
                                                    diam
                                                    voluptua.</p>
                                                <h3 class="h3">ab 30 €* / Woche</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 328px; text-align: center;">
                                        <div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
                                             style="display: inline-block;">
                                            <div class="c-card__body u-pt-x5 u-p-x5">
                                                <h4 class="h4">Logenplätze buchen</h4>
                                                <p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
                                                    sadipscing elitr, sed diam
                                                    nonumy
                                                    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
                                                    diam
                                                    voluptua.</p>
                                                <h3 class="h3">ab 30 €* / Woche</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 348px; text-align: center;">
                                        <div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
                                             style="display: inline-block;">
                                            <div class="c-card__body u-pt-x5 u-p-x5">
                                                <h4 class="h4">Logenplätze buchen</h4>
                                                <p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
                                                    sadipscing elitr, sed diam
                                                    nonumy
                                                    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
                                                    diam
                                                    voluptua.</p>
                                                <h3 class="h3">ab 30 €* / Woche</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 348px; text-align: center;">
                                        <div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
                                             style="display: inline-block;">
                                            <div class="c-card__body u-pt-x5 u-p-x5">
                                                <h4 class="h4">Logenplätze buchen</h4>
                                                <p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
                                                    sadipscing elitr, sed diam
                                                    nonumy
                                                    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
                                                    diam
                                                    voluptua.</p>
                                                <h3 class="h3">ab 30 €* / Woche</h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 348px; text-align: center;">
                                        <div class="c-card c-card--bigborder u-bgcolor-white u-text-center"
                                             style="display: inline-block;">
                                            <div class="c-card__body u-pt-x5 u-p-x5">
                                                <h4 class="h4">Logenplätze buchen</h4>
                                                <p class="u-color-slate-gray">Lorem ipsum dolor sit amet, consetetur
                                                    sadipscing elitr, sed diam
                                                    nonumy
                                                    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
                                                    diam
                                                    voluptua.</p>
                                                <h3 class="h3">ab 30 €* / Woche</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="o-container">
                                <div class="o-grid__col u-12/12 u-12/12@lg u-text-center "><p
                                            class="p-mini text-center">
                                        * Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
                                        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                                        voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>

CSS：

/* Slider */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: fixed;
    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
}
.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    [dir="rtl"] & {
        float: right;
    }
    img {
        display: block;
    }
    &.slick-loading img {
        display: none;
    }

    display: none;

    &.dragging img {
        pointer-events: none;
    }

    .slick-initialized & {
        display: block;
    }

    .slick-loading & {
        visibility: hidden;
    }

    .slick-vertical & {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
}
.slick-arrow.slick-hidden {
    display: none;
}

JS：

if ($('.c-funcslider').length > 0) {
    $('.c-funcslider').slick({
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: true,
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: true,
                    arrows: false
                }

            }
        ]
    });
}

我会说我需要在css或html中对其进行编辑，但是已经在这2个文件中尝试了很多东西。预先感谢！

滑块和点之间的空格[slick]

0 个答案: