HTML

<section class="slider">
    <div class="slide slide--current" data-content="content-1">
        <div class="slide__mover">
            <div class="zoomer flex-center">
                <img class="zoomer__image" src="images/iphone.png" alt="iPhone" />
                <div class="preview">
                    <img src="images/iphone-content-preview.png" alt="iPhone app preview" />
                    <div class="zoomer__area zoomer__area--size-2"></div>
                </div>
            </div>
        </div>
        <h2 class="slide__title"><span>iPhone</span></h2>
    </div>
    <div class="slide" data-content="content-2">
        <div class="slide__mover">
            <div class="zoomer flex-center">
                <img class="zoomer__image" src="images/ipad.png" alt="iPad Mini" />
                <div class="preview">
                    <img src="images/ipad-content-preview.png" alt="iPad Mini app preview" />
                    <div class="zoomer__area zoomer__area--size-4"></div>
                </div>
            </div>
        </div>
        <h2 class="slide__title"><span>The Fantastic</span> iPad Mini</h2>
    </div>
    <div class="slide" data-content="content-3">
        <div class="slide__mover">
            <div class="zoomer flex-center">
                <img class="zoomer__image" src="images/macbook.png" alt="MacBook" />
                <div class="preview">
                    <img src="images/macbook-content-preview.jpg" alt="MacBook app preview" />
                    <div class="zoomer__area zoomer__area--size-3"></div>
                </div>
            </div>
        </div>
        <h2 class="slide__title"><span>The Amazing</span> MacBook</h2>
    </div>
    <div class="slide" data-content="content-4">
        <div class="slide__mover">
            <div class="zoomer flex-center">
                <img class="zoomer__image" src="images/imac.png" alt="iMac" />
                <div class="preview">
                    <img src="images/imac-content-preview.jpg" alt="iMac app preview" />
                    <div class="zoomer__area zoomer__area--size-5"></div>
                </div>
            </div>
        </div>
        <h2 class="slide__title"><span>The Glorious</span> iMac</h2>
    </div>
    <div class="slide" data-content="content-5">
        <div class="slide__mover">
            <div class="zoomer flex-center">
                <img class="zoomer__image" src="images/apple-watch.png" alt="Apple Watch" />
                <div class="preview rounded">
                    <img src="images/apple-watch-content-preview.png" alt="Apple Watch app preview" />
                    <div class="zoomer__area zoomer__area--size-1"></div>
                </div>
            </div>
        </div>
        <h2 class="slide__title"><span>The Fabulous</span> Apple Watch</h2>
    </div>
    <nav class="slider__nav">
        <button class="button button--nav-prev"><i class="icon icon--arrow-left"></i><span class="text-hidden">Previous product</span></button>
        <button class="button button--zoom"><i class="icon icon--zoom"></i><span class="text-hidden">View details</span></button>
        <button class="button button--nav-next"><i class="icon icon--arrow-right"></i><span class="text-hidden">Next product</span></button>
    </nav>
</section>

引入文件

<link rel="stylesheet" type="text/css" href="fonts/feather/style.css"/>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/dynamics.min.js"></script>
<script src="js/main.js"></script>