swiper是一款免费以及轻量级轮播滑动的js框架，适用于PC端跟移动端，官方地址：(https://www.swiper.com.cn/)

效果演示：

PC端

移动端(在浏览器将设备切换为手机，这里切换为iphone)，swiper支持移动端触控左右滑动

代码部分(复制粘贴可直接使用)：

1 html>

2

3

4

Swiper.js简单快速实现轮播滑动(兼容PC端、移动端)

5

6

7

8

9

10

11

12

24

25

26

27 var mySwiper = new Swiper('.swiper-container', {//初始化Swiper

28     autoplay: {//自动切换

29        delay: 3000,

30        stopOnLastSlide: false,

31        disableOnInteraction: false,

32      },

33     navigation: {//前进后退

34        nextEl: '.swiper-button-next',

35        prevEl: '.swiper-button-prev',

36      },

37     pagination: {//分页器

38        el: '.swiper-pagination',

39        clickable :true,

40     },

41     loop : true,//循环

42 })

43

使用方法：

1.首先需要在head头部加载插件，需要用到的文件有swiper.css和swiper.js文件。可下载swiper文件或使用CDN远程加载

2.HTML内容

上面的HTML内容是固定模板，如果需要添加左右箭头或者分页器等其他组件可以参考swiper4的官方文档：https://www.swiper.com.cn/api...

3.初始化Swiper

var mySwiper = new Swiper('.swiper-container', {

autoplay:true,//等同于以下设置

/*autoplay: {

delay: 3000,

stopOnLastSlide: false,

disableOnInteraction: true,

},*/

});

在js中如果需要添加其他配置选项可以参考swiper4的官方文档：

https://www.swiper.com.cn/api...

结语：

在实际的web开发中，总是需要兼容PC跟移动端，如果使用原生js自己写的话，不仅耗时，可能兼容性、稳定性也不好，特别是移动端的touch触控事件。使用swiper便不用考虑到兼容这些事，只要熟悉它的API，便可快速实现手机，电脑网页大部分滑动，焦点图、tab、触摸导航等功能

最后

觉得文章不错的，给我点个赞哇，关注一下呗！

技术交流可关注微信公众号【GitWeb】，加我好友一起探讨

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[swiper.js简单快速实现轮播滑动(兼容PC端、移动端)]http://www.zyiz.net/tech/detail-105473.html