我正在努力使用一种技术（以前在其他项目中为我使用过，但由于某种原因暂时不在此范围内）来隐藏由平滑滑块创建的额外幻灯片，直到滑块准备就绪并处于控制状态幻灯片的布局。
引起关注的主要原因是在此规则中分配的绝对位置：after元素.informative-slider-section .simple-slide-container：after {}。即使主幻灯片没有显示，也仍然显示。
滑块在加载后立即变为应有的状态，但是直到那一点，只有此绝对定位的元素会反复显示在页面上，如果没有滑动，每张幻灯片将显示在页面上。
对我来说，隐藏其他幻灯片（和：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>
让我知道你是否可以看到罪魁祸首吗？
谢谢杰森。
答案 0 :(得分：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;
}