请在这里查看示例 ☞ 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>