小编给大家分享一下swiper怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联公司专注于宁江企业网站建设,
成都响应式网站建设,
成都商城网站开发。宁江网站建设公司,为宁江等地区提供建站服务。全流程按需定制，专业设计，全程项目跟踪，
创新互联公司专业和态度为您提供的服务swiper是什么？
swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。
基本用法
swiper使用需要两个文件，一个是swiper.css，里面规定了一些在这个滑动轮播插件中常用的样式，当然如果你愿意的话可以自己定义样式
另外一个是swiper.js这个是插件的主体部分。
在页面中引入这两个文件之后首先要写基本的html结构
下面所有的使用方式基于swiper 4.x
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
类名为swiper-container 是滑动轮播插件的包裹器，类似于一个mask，一个窗口，swiper-wrapper是一个按照一定顺序排列的所有轮播图的集合，在默认情况下是左右排列，当鼠标或者触屏进行操作的时候，改变的是这个元素的位置，而达到轮播的效果。swiper-slide则是每个轮播图元素，在写好基本html结构之后，需要对这个轮播图进行初始化
这样就能生成一个默认的轮播图，可以用鼠标或者触摸屏来进行左右的滑动
添加分页与导航
大部分的轮播图都有分页，导航，可以让用户看到目前是在什么位置，并且让用户知道这是一个可以交互的部分，添加分页的方式也很简单，只需要在初始化的时候添加选项指定一下分页的元素就行
html部分,在swiper-container下面添加下一个与上一个按钮
...
在这里swiper-button-next和swiper-button-prev都是指定好的按钮，下一个按钮会垂直居中并且靠右边，上一个按钮会垂直居中靠右边，当然也能自己指定按钮。
var swiper = new Swiper('.swiper-container',{
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});在初始化函数中添加按钮元素。
这样就能生成一个有导航按钮的轮播图了
添加分页的方式和导航按钮非常类似
html:
...
在初始化的时候加入分页元素
js:
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});这样就能生成有分页又有导航的轮播图了
循环与自动轮播：
js：
在初始化的时候加入
var swiper = new Swiper('.swiper-container', { //分页
pagination: {
el: '.swiper-pagination',
}, //导航按钮
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}, //自动轮播
autoplay: {
delay: 2500,//时间 毫秒
disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
},
});其他常用属性
分页用进度条代替
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination', type: 'progressbar',//将分页的类型改为进度条就行
},
navigation:{
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});以上是“swiper怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站制作公司行业资讯频道！
网站名称：swiper怎么用-创新互联
网站链接：
http://bjjierui.cn/article/dhioos.html
