手机端滑动插件swiper3.x的使用示例
Posted vcxiaohan2
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机端滑动插件swiper3.x的使用示例相关的知识，希望对你有一定的参考价值。
请在这里查看示例 ☞ swiper示例
1 兼容性ie9勉强兼容
2 http://www.swiper.com.cn/api/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<style>
* margin: 0; padding: 0;
body,html width: 100%; height: 100%;
.div1 width: 80%; overflow: hidden; height: 50%; position: relative; margin: 0 auto;
.parallax-bg width: 100%; height: 100%; background: url(images/p.jpg) no-repeat center; position: absolute;
.swiper-slide box-sizing: border-box; height: 100%;
.a border: 25px solid red;
.b border: 25px solid blue;
.c border: 25px solid green;
.d border: 25px solid yellow;
.e border: 25px solid purple;
.f border: 25px solid black;
.g border: 25px solid pink;
.h border: 25px solid grey;
/*自定义分页器样式*/
.swiper-pagination i padding: 20px;
.swiper-pagination-bullet background: red;
.swiper-pagination-bullet-active background: blue;
/*更改前后按钮的大小*/
.swiper-button-prev width: 80px; height: 80px; background-size: 80px 80px;
</style>
</head>
<body>
<div class="div1">
<div class="parallax-bg" data-swiper-parallax="20%"></div>
<div class="swiper-wrapper">
<div class="swiper-slide a">01<img src="images/p.jpg"></div>
<div class="swiper-slide b">02<img src="images/p.jpg"></div>
<div class="swiper-slide c">03<img src="images/p.jpg"></div>
<div class="swiper-slide d">04<img src="images/p.jpg"></div>
<div class="swiper-slide e">05<img src="images/p.jpg"></div>
<div class="swiper-slide f">06<img src="images/p.jpg"></div>
<div class="swiper-slide g">07<img src="images/p.jpg"></div>
<div class="swiper-slide h">08<img src="images/p.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 前后按钮的颜色更改
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-next swiper-button-black"></div>
前后按钮的颜色更改 -->
<div class="swiper-scrollbar"></div>
</div>
<div>
一些事件
<p class="prevPage">上一页</p>
<p class="nextPage">下一页</p>
<p class="pointPage">切换到指定页</p>
</div>
<script>
$(function()
//swiper3.x 基本参数
var pageTxt = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];//自定义分页器中的文字
var swiper = new Swiper('.div1', //也可以用默认的类名swiper-container
autoplay: 2000,//自动滑动，操作后停止
autoplayDisableOnInteraction: false,//操作后是否停止自动滑动
initialSlide: 1,//第一张显示的下标
//direction: 'vertical',//垂直方向
grabCursor: true,//改变鼠标形状
parallax: true,//视差滚动，需设置absolute
slidesPerView: 3,//一次显示张数
//spaceBetween: 40,//每两张间隔
//slidesPerGroup: 2,//每次最少滑动张数
//slidesPerColumn: 2,//每列显示的张数
/*breakpoints: //响应式
480:
slidesPerView: 1,
spaceBetween: 10,
,
680:
slidesPerView: 2,
spaceBetween: 20,
,
,*/
freeMode: true,//是否自由滑动
freeModeSticky: true,//自由活动下也能贴合边缘
//effect: 'cube',//各浏览器处理不一样，慎用,ie9-支持不好 slide fade cube coverflow flip
pagination: '.swiper-pagination',//分页器,类名最好别变
paginationType: 'bullets',//分页器的样式 bullets fraction progress custom
paginationClickable: true,//分页器是否可点
paginationBulletRender: function(index, className) //改变分页器的结构
return '<i class="'+ className +'">'+ pageTxt[index] +'</i>'
,
prevButton: '.swiper-button-prev',//不要忘记点
nextButton: '.swiper-button-next',
scrollbar: '.swiper-scrollbar',//滚动条
scrollbarDragggable: true,//是否可拖动
keyboardControl: true,//键盘控制切换
mousewheelControl: true,//滚轮控制切换
loop: true,//无缝滑动
onInit: function(swiper)
console.log('初始化完成');
,
onTouchStart: function(swiper)
console.log('触碰到');
,
onTouchMove: function(swiper)
console.log('滑动中');
,
onTouchEnd: function(swiper)
console.log('释放');
,
onSlideChangeStart: function(swiper)
console.log('执行切换刚开始');
,
onSlideChangeEnd: function(swiper)
console.log('执行切换刚结束');
,
onClick: function(swiper)
console.log('点击');
,
);
//上一页
$('.prevPage').on('click', function()
swiper.slidePrev();
);
//下一页
$('.nextPage').on('click', function()
swiper.slideNext();
);
//指定页
$('.pointPage').on('click', function()
swiper.slideTo(4);
);
);
</script>
</body>
</html>以上是关于手机端滑动插件swiper3.x的使用示例的主要内容，如果未能解决你的问题，请参考以下文章