Question

我正在尝试使用skrollr加载materialize滑块，它正在工作，但只有滑块的第一项是不透明度：0;条件

在等待第二对夫妇之后，它显示了第二项。

这是我的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

Materializecss滑块第一个项目未显示

1 个答案: