jquery - Slick Slider - 在滑块初始化之前隐藏其他幻灯片
问题描述
我正在努力使用一种技术（以前在其他项目中对我有用，但由于某种原因这次不是）来隐藏由光滑滑块创建的额外幻灯片，直到滑块准备好并控制布局的幻灯片。
引起关注的主要原因是在此规则中分配的绝对定位 :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>罪魁祸首可能是什么？
解决方案
您可以:not(.slick-initialized)像这样使用轮播上的选择器：
.simple-slider:not(.slick-initialized) .simple-slide-container:after {
display: none;
}
.slick-slider请注意，即使此元素在页面加载时不存在（这是第一次让我感到困惑的原因），您的其他 CSS 规则也在定位，因此这些规则实际上什么都不做：
.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;
}
推荐阅读
- eigen - 重复调用 CwiseUnaryView - 更好地复制到矩阵？
- php - 无法在单程中建立关系
- c# - 比较 XSLT2 中的两个子节点
- java - Hackerrank Java Map Question 超时问题
- mule - 在以下 Web 服务中替换 mule 和 jetty 的替代方法是什么？
- node.js - 缓冲区在节点 js 中如何工作？
- laravel-5 - 如何修复 Laravel 5.8 中的 .htaccess 问题
- javascript - 有没有一种方法可以在树形图中为特定父级的子级实现颜色深浅
- batch-file - 为文件夹创建日期格式时出错
- c++ - 为什么在 C++ 中使用虚函数