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>
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%;
}