jquery - Materializecss slider 第一项不显示

Question

我正在尝试使用 skrollr 加载物化 slider ，它正在工作，但只有 slider 的第一项处于不透明度:0；条件

在等待 couples second 之后，它显示了它的第二个元素。

这是我的 HTML 代码

<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">
                    <!-- Title -->
                    <h3>How We Met</h3>
                    <!-- Story -->
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h5>
                </div>
            </li>

            <li>
                <div class="caption left-align">
                    <!-- Title -->
                    <h3>How We Met</h3>
                    <!-- Story -->
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h5>
                </div>
            </li>

            <li>
                <div class="caption left-align">
                    <!-- Title -->
                    <h3>How We Met</h3>
                    <!-- Story -->
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h5>
                </div>
            </li>

            <li>
                <div class="caption left-align">
                    <!-- Title -->
                    <h3>How We Met</h3>
                    <!-- Story -->
                    <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</h5>
                </div>
            </li>
        </ul>
    </div>
</div>

这是我的 CSS 代码

#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;
}

如果有人能帮助我，那就太好了，先谢谢了。

Answer 1

添加 <img>应该这样做。这不是最优雅的方式，也不是最好的方式，但是很多使用 materializecss 的网站已经做到了。

例如这个eyerys website .从源代码中你可以看到有一个 <img>紧跟在第一个 <li> 之后的标签标签。

该技巧已记录在案here