html实现轮播手机滑动,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）

以你之姓@ 2022-10-06 10:52 317阅读 0赞

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

效果演示：

PC端：

![dd103fb3e05d8a479a0992f6fb749c19.gif][]

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

![378402c522051ca3dacb03db0957b41b.gif][]

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

1

2

3

4

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

5

6

7

8

9

10

11

12

13

14

15

slider1

16

slider2

17

slider3

18

slider4

19

20

21

22

23

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远程加载

复制代码

swiper4文件下载地址：

https://www.swiper.com.cn/download/index.html

swiper4远程CDN加载地址：

https://www.swiper.com.cn/cdn/index.html

2.HTML内容

slider1

slider2

slider3

slider4

复制代码

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

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/index.html

结语：

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

最后

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

如果对文章有疑问或想技术交流，可关注公众号【GitWeb】与我一起探索学习！

[dd103fb3e05d8a479a0992f6fb749c19.gif]: /images/20221005/8e300668423f4bf9a0cb1c9cf512cc87.png
[378402c522051ca3dacb03db0957b41b.gif]: /images/20221005/4b517585995044b5bd9d2ea5a51bfc2c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5移动端轮播滑动效果（swiper实现）

天开发的项目有个页面需要做一个轮播图效果，我也在网上找了插件，最后通的是swiper插件，和移动端开发比较匹配，官网地址：[https://www.swiper.com....

ゞ浴缸里的玫瑰/ 2024年04月17日 16:17/ 0 赞/ 99 阅读

相关 PC 端网页轮播图

文章目录一、案例分析二、结构搭建三、具体实现 1.鼠标经过按钮时 2.动态生成小圆

清疚/ 2023年09月26日 10:39/ 0 赞/ 97 阅读

相关 js实现轮播和滑动轮播

js的轮播图无论网页还是移动端都随处可见，本文用简单的方法来实现js的普通轮播图与滑动轮播图。（废话不多说，关键思路都写在代码注释处） js普通轮播简单描述一下js普

矫情吗；*/ 2023年02月18日 08:27/ 0 赞/ 64 阅读

相关 jq实现滑动轮播效果

1、简单版本（无循环轮播，同时展示多张图片） [https://juejin.im/post/6844903799115497479][https_juejin.im_

桃扇骨/ 2022年12月17日 01:28/ 0 赞/ 283 阅读

相关移动端轮播图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

矫情吗；*/ 2022年10月25日 14:04/ 0 赞/ 221 阅读

相关 html实现手机端轮播图,swiper移动端轮播图简单实现

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min

你的名字/ 2022年10月07日 12:46/ 0 赞/ 321 阅读

相关 html实现轮播手机滑动,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）

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

以你之姓@/ 2022年10月06日 10:52/ 0 赞/ 318 阅读

相关 jquery 实现轮播图_滑动切换

<!doctype html> <html> <head> <meta charset="utf-8"> <titl

待我称王封你为后i/ 2022年05月11日 12:56/ 0 赞/ 372 阅读

相关移动端轮播

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont

谁践踏了优雅/ 2022年02月02日 02:39/ 0 赞/ 284 阅读

相关 bootstrap轮播如何支持移动端滑动手势

1.下载滑动手势 js 插件：hammer.js //cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js 2.写一个javascri

待我称王封你为后i/ 2021年12月15日 11:39/ 0 赞/ 351 阅读