Currently, I am attempting to implement materialize slider with skrollr. The setup is functional; however, only the first item of the slider is set to opacity: 0 initially.
https://i.stack.imgur.com/urSww.jpg
After a brief delay, the second item becomes visible.
https://i.stack.imgur.com/DNmm7.jpg
This is the snippet of my HTML code:
<div id="story"
data-0="display: none;"
data-1="display: block; top: 200%;"
data-2000="top: 0%;"
data-3000="top: -100%;"
>
<div id="story-overlay"></div>
<div id="story-title">
<p class="uppercase">Love Story</p><br>
<p class="date"><span class="uppercase">September</span> 20th, 2015</p>
</div>
<div id="story-carousel">
<div class="slider">
<ul class="slides">
<li>
<div class="caption left-align">
<h3>How We Met</h3>
<h5>Lorem ipsum dolor sit amet...</h5>
</div>
</li>
<li>
<div class="caption left-align">
<h3>How We Met</h3>
<h5>Lorem ipsum dolor sit amet...</h5>
</div>
</li>
<li>
<div class="caption left-align">
<h3>How We Met</h3>
<h5>Lorem ipsum dolor sit amet...</h5>
</div>
</li>
<li>
<div class="caption left-align">
<h3>How We Met</h3>
<h5>Lorem ipsum dolor sit amet...</h5>
</div>
</li>
</ul>
</div>
</div>
Below is the excerpt from my CSS styles:
#story #story-carousel {
position: absolute;
display: block;
top: 0;
left: 0;
height: 400px;
width: 100%;
z-index: 1;
background-color: transparent;
}
#story #story-carousel .slides {
z-index: 1;
background-color: transparent;
padding: 200px;
padding-top: 20;
}
#story #story-carousel .slides h3 {
font-weight: 100;
text-transform: uppercase;
color: #fff;
}
#story #story-carousel .slides h5 {
padding: 20px;
font-size: 1.1rem;
color: #fff;
font-weight: 100;
}
#story #story-carousel .slider .indicators {
z-index: 999;
}
If anyone has insights on solving this issue, your help would be greatly appreciated. Thank you in advance!