SOURCE

console 命令行工具 X clear

                    
>
console
$(function () {
    var mySwiper = new Swiper('#swiper-container1', {
        autoplay: {
            delay: 3000
        },
        // 导航
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',      // bullets(圆点), fraction(分式), progressbar(进度条) 默认: bullets
            dynamicBullets: true,  // 动态分页器,当你的slide很多时,开启后,分页器小点的数量会部分隐藏, 默认: false
            // clickable: true,  // 此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。 默认: false
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: false,

        // effect: 'slide',                      // 转换效果 slide,fade
        //direction: 'horizontal',              // 轮播方向, horizontal vertical
        //autoplayDisableOnInteraction: true,     // 触摸后是否禁止轮播
        //grabCursor: true,                     // 鼠标hover时变成抓手形状
        //speed: 300,                           // 切换速度
        //simulateTouch: true,                    // 是否可以用鼠标拖动切换
        //onlyExternal: true,                     // 是否禁用touch滑动
        //freeMode: true,                         // 是否开启free滑动(无贴合)
        //freeModeSticky: true,                   // freeMode模式是否也可以贴合
        // slidesPerView: 3,                    // 显示多个滑块
        //slidesPerGroup: 3,                    // 多个一组
        // spaceBetween: 10,                     // 间距10px
        //keyboardControl: true,                  // 是否开启键盘切换
        //mousewheelControl: true,                // 是否开启滚轮切换

        // 事件
        on: {
            slideChange() {
                // console.log(this.activeIndex)
            },
            touchMove() {
                if (mySwiper.translate > 100) {
                    console.log('释放刷新')
                } else {
                    console.log('下拉刷新')
                }
            },
            touchEnd() {
                // 偏移量大于100
                if (mySwiper.translate > 100) {
                    console.log('已刷新')
                    top.location.reload()
                }

            }
        },

    });

});
<meta name="referrer" content="no-referrer" />

<div class="swiper-container" id="swiper-container1">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://ww3.sinaimg.cn/mw690/006BLD6Tgw1f9w38dhlhaj31hc0u077m.jpg">
        </div>
        <div class="swipe
        r-slide">
            <img src="https://ww4.sinaimg.cn/mw690/bea70753gw1f9vj12q9rcj21hc0u0dnh.jpg">
        </div>
        <div class="swiper-slide">
            <img src="https://t.cn/RaD2GNO">
        </div>
    </div>
    <!-- 底部导航 -->
    <div class="swiper-pagination"></div>

    <!-- 左右按钮 -->
    <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
</div>
/* css reset */
body,p,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer {
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    font: 16px Microsoft YaHei, sans-serif;
    color: #2a2b2c;
    background: #fff;
}
a,img {
    text-decoration: none;
    color: #2a2b2c;
    border: 0;
}
*, *::before, *::after {
    outline: none;
    box-sizing: border-box;
}

.swiper-container {
    width: 50%;
    height: 230px;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 2px;
}
.swiper-container img {
    width: 100%;
    height: 100%;
}

本项目引用的自定义外部资源