jquery - Slick Slider - 在初始化 slider 之前隐藏其他幻灯片

Question

我正在努力使用一种技术(以前在其他元素中对我有用，但出于某种原因这次没有)来隐藏由光滑 slider 创建的额外幻灯片，直到 slider 准备就绪并处于控制之中幻灯片的布局。

引起关注的主要原因是绝对定位的 :after 元素在此规则 .informative-slider-section .simple-slide-container:after {} 中分配。即使主幻灯片不显示，这仍然会显示。

slider 在加载后不久就变成了它应该的样子，但在那之前，只有这个绝对定位的元素会重复地向下显示页面，如果它没有得到光滑的话，每张幻灯片都会显示。

在构建 slider 并准备好显示幻灯片之前，隐藏其他幻灯片(和 :after)的最佳方法是什么？

我将发布我的代码的简化版本:

    $('.simple-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 5000,
        speed: 500,
        dots: true,
        arrows: false
    });

    /* GENERAL */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box!important;
        position: relative;
    }
        @media screen and (max-width: 1023px) {
            * {
                text-align: center;
            }
        }

    body {
        width: 100%;
        height: 100%;
    }
        .section {
            width: 100%;
            height: auto;
            margin: 0 auto;
            position: relative;
            display: block;
        }   
            .section-inner {
                width: 100%;
                max-width: 1248px;
                height: auto;
                margin: 0 auto;
                position: relative;

                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-wrap: wrap;
                flex-wrap: wrap;

                flex-direction: row;
                align-items: stretch;
                justify-content: space-between;
            }
    .noselect {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .box-link {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        text-decoration: none;
        outline: 0;
        z-index: 150;
    }
    /* GENERAL */

    .slick-dots {
        width: 100%;
        height: 50px!important;
        position: absolute;
        bottom: 20px!important;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        list-style: none;
    }
        .slick-dots li {
            width: 25px!important;
            height: 25px!important;
            margin: 10px!important;
            text-align: center;
            border-radius: 50%!important;
            cursor: pointer;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
        }
            .slick-dots li button {
                width: 100%!important;
                height: 100%!important;
                background-color: white!important;
                outline: 0;
                color: transparent;
                border: 3px solid white;
                border-radius: 50%!important;
                cursor: pointer;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
            }
                .slick-dots li button:hover {
                    border: 3px solid white;
                    background-color: #585CD3!important;
                }
                .slick-dots li button[aria-selected=true] {
                    background-color: #585CD3!important;
                    border: 3px solid #585CD3;
                }

    .informative-slider-section .section-inner {
        max-width: 100%;
        color: white;
    }
        .simple-slider {
            width: 100%;
            height: 500px;
        }
            .simple-slide {
                height: 500px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
                .informative-slider-section .simple-slide-inner {
                    display: -webkit-box;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;
                }
                    .informative-slider-section .simple-slide-container {
                        width: 50%;
                        height: 500px;
                        background-size: auto;
                        background-repeat: repeat;
                        background-position: right;
                    }
                    .informative-slider-section .simple-slide-image {
                        width: 50%;
                        height: 500px;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                        .informative-slider-section .simple-slide-container:after {
                            content: '';
                            width: 0;
                            height: 0;
                            position: absolute;
                            top: 0;
                            left: 100%;
                            border-style: solid;
                            border-width: 500px 50px 0 0;
                            border-color: #222853 transparent transparent transparent;
                            z-index: 1;
                        }
                        .informative-slider-section .simple-slide-container-inner {
                            width: calc(100% - 40px);
                            max-width: 584px;
                            position: absolute;
                            top: 50%;
                            right: 20px;
                            -ms-transform: translateY(-50%);
                            -webkit-transform: translateY(-50%);
                            transform: translateY(-50%);
                        }
                            .informative-slider-section .simple-slide-title {
                                text-transform: uppercase;
                            }
                            .informative-slider-section .simple-slide-button {
                                display: inline-block;
                                padding: 10px 20px;
                                background-color: #e20437;
                                -webkit-transition: all 0.7s;
                                transition: all 0.7s;
                            }
                                .informative-slider-section a:hover ~ .simple-slide-inner .simple-slide-button {
                                    background-color: #9D1750;
                                }
                                .informative-slider-section .simple-slide-button-text {
                                    margin: 0;
                                }
    @media screen and (min-width: 768px) and (max-width: 1247px) {
        .informative-slider-section .simple-slide-container {
            width: 624px;
        }
        .informative-slider-section .simple-slide-image {
            width: calc(100% - 624px);
        }
    }
    @media screen and (max-width: 767px) {
        .informative-slider-section .simple-slide-container {
            width: 100%;
        }
            .informative-slider-section .simple-slide-container:after {
                display: none;
            }
            .informative-slider-section .simple-slide-container-inner {
                right: auto;
                left: 50%;
                -ms-transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        .informative-slider-section .simple-slide-image {
            display: none;
        }
    }

    .slick-slider:not(.slick-initialized),
    .slick-slider:not(.slick-initialized) .slick-slide,
    .slick-slider:not(.slick-initialized) .slick-slide .simple-slide-container:after {
        display: none!important;
    }
    .slick-slider:has(.slick-initialized),
    .slick-slider:has(.slick-initialized) .slick-slide,
    .slick-slider:has(.slick-initialized) .slick-slide .simple-slide-container:after {
        display: block!important;
    }

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<div class="section informative-slider-section noselect">
    <div class="section-inner">
        <div class="simple-slider">
            <div class="simple-slide">
                <a href="/" class="box-link"></a>
                <div class="simple-slide-inner">
                    <div class="simple-slide-container" style="background-color: red;">
                        <div class="simple-slide-container-inner">
                            <h3 class="simple-slide-title">Hello</h3>
                            <p class="simple-slide-content">World</p>
                            <div class="simple-slide-button">
                                <h4 class="simple-slide-button-text">Clean this world up!</h4>
                            </div>
                        </div>
                    </div>
                    <div class="simple-slide-image" style="background-color: blue;">
                    </div>
                </div>
            </div>
            <div class="simple-slide">
                <a href="/" class="box-link"></a>
                <div class="simple-slide-inner">
                    <div class="simple-slide-container" style="background-color: red;">
                        <div class="simple-slide-container-inner">
                            <h3 class="simple-slide-title">Hello</h3>
                            <p class="simple-slide-content">World</p>
                            <div class="simple-slide-button">
                                <h4 class="simple-slide-button-text">Clean this world up!</h4>
                            </div>
                        </div>
                    </div>
                    <div class="simple-slide-image" style="background-color: blue;">
                    </div>
                </div>
            </div>
            <div class="simple-slide">
                <a href="/" class="box-link"></a>
                <div class="simple-slide-inner">
                    <div class="simple-slide-container" style="background-color: red;">
                        <div class="simple-slide-container-inner">
                            <h3 class="simple-slide-title">Hello</h3>
                            <p class="simple-slide-content">World</p>
                            <div class="simple-slide-button">
                                <h4 class="simple-slide-button-text">Clean this world up!</h4>
                            </div>
                        </div>
                    </div>
                    <div class="simple-slide-image" style="background-color: blue;">
                    </div>
                </div>
            </div>
            <div class="simple-slide">
                <a href="/" class="box-link"></a>
                <div class="simple-slide-inner">
                    <div class="simple-slide-container" style="background-color: red;">
                        <div class="simple-slide-container-inner">
                            <h3 class="simple-slide-title">Hello</h3>
                            <p class="simple-slide-content">World</p>
                            <div class="simple-slide-button">
                                <h4 class="simple-slide-button-text">Clean this world up!</h4>
                            </div>
                        </div>
                    </div>
                    <div class="simple-slide-image" style="background-color: blue;">
                    </div>
                </div>
            </div>
            <div class="simple-slide">
                <a href="/" class="box-link"></a>
                <div class="simple-slide-inner">
                    <div class="simple-slide-container" style="background-color: red;">
                        <div class="simple-slide-container-inner">
                            <h3 class="simple-slide-title">Hello</h3>
                            <p class="simple-slide-content">World</p>
                            <div class="simple-slide-button">
                                <h4 class="simple-slide-button-text">Clean this world up!</h4>
                            </div>
                        </div>
                    </div>
                    <div class="simple-slide-image" style="background-color: blue;">
                    </div>
                </div>
            </div>
            <div class="simple-slide">
                <a href="/" class="box-link"></a>
                <div class="simple-slide-inner">
                    <div class="simple-slide-container" style="background-color: red;">
                        <div class="simple-slide-container-inner">
                            <h3 class="simple-slide-title">Hello</h3>
                            <p class="simple-slide-content">World</p>
                            <div class="simple-slide-button">
                                <h4 class="simple-slide-button-text">Clean this world up!</h4>
                            </div>
                        </div>
                    </div>
                    <div class="simple-slide-image" style="background-color: blue;">
                    </div>
                </div>
            </div>
            <div class="simple-slide">
                <a href="/" class="box-link"></a>
                <div class="simple-slide-inner">
                    <div class="simple-slide-container" style="background-color: red;">
                        <div class="simple-slide-container-inner">
                            <h3 class="simple-slide-title">Hello</h3>
                            <p class="simple-slide-content">World</p>
                            <div class="simple-slide-button">
                                <h4 class="simple-slide-button-text">Clean this world up!</h4>
                            </div>
                        </div>
                    </div>
                    <div class="simple-slide-image" style="background-color: blue;">
                    </div>
                </div>
            </div>
            <div class="simple-slide">
                <a href="/" class="box-link"></a>
                <div class="simple-slide-inner">
                    <div class="simple-slide-container" style="background-color: red;">
                        <div class="simple-slide-container-inner">
                            <h3 class="simple-slide-title">Hello</h3>
                            <p class="simple-slide-content">World</p>
                            <div class="simple-slide-button">
                                <h4 class="simple-slide-button-text">Clean this world up!</h4>
                            </div>
                        </div>
                    </div>
                    <div class="simple-slide-image" style="background-color: blue;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

罪魁祸首是什么？

Answer 1

您可以像这样在轮播上使用 :not(.slick-initialized) 选择器:

.simple-slider:not(.slick-initialized) .simple-slide-container:after {
    display: none;
}

请注意您的其他 CSS 规则以 .slick-slider 为目标，即使该元素在页面加载时不存在(这是我第一次遇到的问题)，因此这些规则实际上什么都不做:

.slick-slider:not(.slick-initialized),
.slick-slider:not(.slick-initialized) .slick-slide,
.slick-slider:not(.slick-initialized) .slick-slide .simple-slide-container:after {
    display: none!important;
}