Swiper4 好用的触摸滑动插件

轮播图在日常网站建设 是一个很常见的组件
自己编写的轮播图 看似没有太多问题
不过兼容性 以及流畅度一直是个大问题

所以 推荐一款好用的兼容性较好的触摸滑动插件

Swiper4

原理

Swiper 的每个展示块(屏)为一个slide slide中放置图片或文字等展示的内容
全部slide排成一行(或多行)包含在包装器wrapper中 而总容器container
又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination
当手指(或鼠标)触摸滑动Swiper时 Swiper在浏览器每一帧通过计算滑动的距离差对wrapper进行位移(transform)从而产生拖动的效果 在手指(或鼠标)释放时
计算下一个slide的起始位置对wrapper设置位移动画(transition)
从而产生切换动画效果

使用方法

这里推荐个好用的静态资源cdn网站 BootCDN 🌟

  • 引用资源

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html>
    <head>
    ...
    <link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet">
    </head>
    <body>
    ...
    <script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js"></script>
    ...
    </body>
    </html>
  • 简单的使用demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</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>

<script>
window.onload = function() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项

// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},

// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
}
</script>

即可轻松实现一个兼容性较好的轮播图组件

更多的使用方法可参见Swiper中文网API页

# JS, 插件

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×