Swiper.js

---

< ! ---------- HTML ----------- >

<div class="swiper-container box">
    <div class="swiper-wrapper slider">
        <div class="swiper-slide">![](images/01.jpg)</div>
        <div class="swiper-slide">![](images/02.jpg)</div>
        <div class="swiper-slide">![](images/10.jpg)</div>
        <div class="swiper-slide">![](images/13.jpg)</div>
        <div class="swiper-slide">![](images/14.jpg)</div>
        <div class="swiper-slide">![](images/16.jpg)</div>
        <div class="swiper-slide">![](images/19.jpg)</div>
        <div class="swiper-slide">![](images/35.jpg)</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

< ! --------- Style --------------- >

<style>
    .box {
        width: 300px;
        height: 433px;
        margin: 100px auto;
    }
    .slider img{
        width: 300px;
        height: 433px;
    }
</style>

< ! --------- JavaScript ------- >

<script>
    var swiper = new Swiper('.swiper-container', {
        // 如果需要分页器器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',

        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',

        loop: true,
        autoplay: 1000,
        direction: 'horizontal', //切换方向 水平(horizontal)或垂直(vertical)
        speed: 400,
        keyboardControl: true,
        paginationType: "fraction",
        effect: 'flip',
    });
</script>

< ! --------- 效果展示 ---------- >

zepto1.gif