下面是轮播图的HTML结构：
<div class="page-view">
<div class="project">
<div class="text">
<h1>“All good things are <br> wild & free”</h1>
<p>Photo by Andreas Rønningen</p>
</div>
</div>
<div class="project">
<div class="text">
<h1>“Into the wild”</h1>
<p>Photo by John Price</p>
</div>
</div>
<div class="project">
<div class="text">
<h1>“Is spring coming?”</h1>
<p>Photo by Thomas Lefebvre</p>
</div>
</div>
<div class="project">
<div class="text">
<h1>“Stay curious”</h1>
<p>Photo by Maria</p>
</div>
</div>
<nav class="arrows">
<div class="arrow previous">
<svg viewBox="208.3 352 4.2 6.4">
<polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/>
</svg>
</div>
<div class="arrow next">
<svg viewBox="208.3 352 4.2 6.4">
<polygon class="st0" points="212.1,357.3 211.5,358 208.7,355.1 211.5,352.3 212.1,353 209.9,355.1"/>
</svg>
</div>
</nav>
</div><div>作为整个容器，<div>是我们创建的幻灯片的各个部分，每一部分都包换了一个图片标题和图片说明。另外，每张幻灯片都设置了一张单独的背景图。其中的箭头部分用于触发下一张或者是上一张幻灯片。
The CSS
我们设置了一个传统的全屏轮播图布局，中心放置标题，左下角放置页面导航。此外定义了@media 查询以适应移动设备的样式。另外将sprite images设置为容器中不可见的背景，这样做是为了在打开网页的时候确保sprite images开始加载。
.demo-1 {
background: url(../img/nature-sprite.png) no-repeat -9999px -9999px;
background-size: 0;
}.demo-1 .page-view {
background: url(../img/nature-sprite-2.png) no-repeat -9999px -9999px;
background-size: 0;
}
每一张幻灯片都有不同的background-image:
.demo-1 .page-view .project:nth-child(1) {
background-image: url(../img/nature-1.jpg);
}.demo-1 .page-view .project:nth-child(2) {
background-image: url(../img/nature-2.jpg);
}
.demo-1 .page-view .project:nth-child(3) {
background-image: url(../img/nature-3.jpg);
}
.demo-1 .page-view .project:nth-child(4) {
