swiper的基本使用 |
您所在的位置：网站首页 › class代码什么意思 › swiper的基本使用 |
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结构之后，需要对这个轮播图进行初始化 var swiper = new Swiper('.swiper-container');这样就能生成一个默认的轮播图，可以用鼠标或者触摸屏来进行左右的滑动 添加分页与导航大部分的轮播图都有分页，导航，可以让用户看到目前是在什么位置，并且让用户知道这是一个可以交互的部分，添加分页的方式也很简单，只需要在初始化的时候添加选项指定一下分页的元素就行 html部分,在swiper-container下面添加下一个与上一个按钮 ...在这里swiper-button-next和swiper-button-prev都是指定好的按钮，下一个按钮会垂直居中并且靠右边，上一个按钮会垂直居中靠右边，当然也能自己指定按钮。 var swiper = new Swiper('.swiper-container',{ 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', } });这样就能生成有分页又有导航的轮播图了 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 }, loop: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, }, });其他常用属性待添加。。不急慢慢来 ，反正是自己看的2333 |
添加分页的方式和导航按钮非常类似 html:
【本文地址】
今日新闻 |
推荐新闻 |