I am struggling to use a technique (that has worked for me previously in other projects but for some reason is not this time around) to hide the extra slides that get created by slick slider, until the slider is ready and in control of the layout of the slides.
The main cause of concern is the absolutely positioned :after element assigned in this rule .informative-slider-section .simple-slide-container:after {}. This still shows even when the main slide does not.
The slider becomes what it should shortly after load but until that point, only this absolutely positioned element shows repeatedly going down the page where each slide would be showing if it didn't get slick'd.
What is the best way for me to hide additional slides (& the :after) until the slider is built and ready to show the slides?
I will post a simplified version of my code:
$('.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>What might be the culprit?
