Swiper轮播插件的使用

一、入门Swiper插件
- 1.1 swiper插件的下载
- 1.2 swiper插件的具体应用
- - 使用步骤：
二、快速学习Swiper API
- 2.1 Swiper初始化
三、常用Swiper API（可以说就是配置选项）
- 3.1 Basic一般选项
- 3.2 Free Mode（抵抗反弹）
- 3.3 Effect切换效果
- 3.4 Click点击
- 3.5 pagination 分页器
- 3.6 Loop 环路
四、特别提醒
- 以上内容只是用于自己学习，如有错误，还请大家指出错误，共同进步。

一、入门Swiper插件

1.1 swiper插件的下载

访问Swiper官网
点击获取Swiper，下载Swiper插件
解压，提取自己想要的文件css、js文件
依次进入 dist—>css–>将swiper.css文件复制到自己的项目中；再次进入dist—>js—>将swiper.js文件复制到自己的项目中
说明：dist中有swiper.css文件和swiper.min.css文件，两者都可以，唯一的区别是min.css文件是经过压缩的，占用空间少，但是源码一行显示，不利于阅读学习;js文件也是一样的。

1.2 swiper插件的具体应用

使用步骤：

新建html文件
1. 分别将swiper.css文件和js文件引入（建议将js文件放到body结束标签后引入

将基本的轮播模板写好（特别注意：原有类名不要去改哦，改了会失效，可以自己在后面定义id）

<body><div class="swiper-container" id="boss"><div class="swiper-wrapper"><div class="swiper-slide" id="swiper_one">图片①</div><div class="swiper-slide" id="swiper_two">图片②</div><div class="swiper-slide" id="swiper_three">图片③</div></div></div>
</body>

书写js代码，实例化一个swiper对象；单独的js文件中，最好使用window.onload = function(){ }方法）

window.onload =function(){代码 }

<script src="./swiper.js"></script>
<script>//实例化一个swipervar mySwiper = new Swiper('#boss', {autoplay: 3000,initialSlide:1,});
</script>

二、快速学习Swiper API

2.1 Swiper初始化

初始化的基本语法
```
new Swiper（SwiperContainer，parameter）
```
参数说明：
- SwiperContainer：容器选择器，也就是上图的40行的class或者是id的值（例如下图：#boss）
  - parameter：（可选）配置选项 ---->注意：以后和花括号打交道打的多，因为基本上的功能都要在里面声明使用；写完一対属性记得用逗号分隔

三、常用Swiper API（可以说就是配置选项）

3.1 Basic一般选项

属性	返回值	说明	个人解释
initialSlide	number	设置初始化的slide索引	轮播图第一张要显示的图片
direction	string	滑动的方向（水平horizontal 垂直vertical)）	左右（水平）滑动上下（垂直）滑动
autoplay	number	自动播放的单位ms	不写这个不会自己播放
autoplayDisableOnInteraction	boolean	用户操作swiper之后，是否禁止autoplay。默认为true：停止	自己用鼠标滑动了图片，就不会自动播放了
grabCursor	boolean	设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状	鼠标放入变成小手样式

3.2 Free Mode（抵抗反弹）

属性	说明	个人解释
freeMode	默认false 值滑动一个	手动滑动时，可以把两图交界显示

3.3 Effect切换效果

属性	属性值
effect	默认slide、fade淡入、cube方块、coverflow 3d流、flip 3d翻转

3.4 Click点击

属性	说明
preventClicks	当swiper在触摸时阻止默认事件（preventDefault），用于防止触摸时触发链接跳转

3.5 pagination 分页器

属性	属性值
pagination	默认null
paginationType	bullets圆点、fraction分式、progress进度条、custom自定义
paginationClickable	此默认为true，点击分页器可切换到对应图片

3.6 Loop 环路

属性	属性值	说明
loop	默认faslse	设置true能够让图片看起来连贯播放

四、特别提醒

以上内容只是用于自己学习，如有错误，还请大家指出错误，共同进步。

Swipe轮播插件的使用相关推荐

轮播移动端 html,移动端h5如何使用轮播插件swipe
移动端h5如何使用轮播插件swipe 发布时间:2020-07-16 15:36:34 来源:亿速云阅读:100 作者:Leah 本篇文章为大家展示了移动端h5如何使用轮播插件swipe,代码简明扼 ...
boostrap 鼠标滚轮滑动图片_BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)...
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 因为最近开发的项 ...
支持响应式手机端jQuery图片轮播插件unslider
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
一款好用的轮播插件swiper，适用于移动端和web
swiper的dom布局 <div id="commentsSwiper" class="swiper-container"><div cla ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件学习要点: 1.轮播插件本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
swiper轮播插件的使用
swiper轮播插件的使用引入js文件 <script src="./js/swiper-3.4.2.min.js"></script> 接收后台返回的轮 ...

Swipe轮播插件的使用

Swiper轮播插件的使用

一、入门Swiper插件

1.1 swiper插件的下载

1.2 swiper插件的具体应用

使用步骤：

二、快速学习Swiper API

2.1 Swiper初始化

三、常用Swiper API（可以说就是配置选项）

3.1 Basic一般选项

3.2 Free Mode（抵抗反弹）

3.3 Effect切换效果

3.4 Click点击

3.5 pagination 分页器

3.6 Loop 环路

四、特别提醒

以上内容只是用于自己学习，如有错误，还请大家指出错误，共同进步。

Swipe轮播插件的使用相关推荐

最新文章

热门文章