//引入idangerous.swiper.min.js
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
pagination: '.pagination',
autoplay: 2000,
autoplayDisableOnInteraction:false,
paginationClickable: true,
mode: 'vertical',//竖向轮播
mousewheelControl : true
});
js
//引入idangerous.swiper.css
*{margin:;padding:;}
.swiper{position:relative;height:600px;}
.swiper-wrapper,.swiper-slide,.swiper-slide img{width:100%;}
.pagination {
position: absolute;
z-index:;
left: 10px;
top: 10px;
}
.swiper-pagination-switch {
display: block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #555;
margin: 0 0px 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-active-switch {
background: #f8bb00;
}
css
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="idangerous.swiper.css"/>
</head>
<body>
<div class="swiper">
<div class="swiper-container jl_lb">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="javascript:void (0);"><img src="in_banner.png"></a>
</li>
<li class="swiper-slide">
<a href="javascript:void (0);"><img src="in_banner.png"></a>
</li>
</ul>
</div>
<div class="pagination"></div>
</div> </body>
<script src="idangerous.swiper.min.js"></script>
</html>
swiper动画
1、需要同时引入animate.min.css 和 swiper.animate.min.js
2、给需要添加动画的元素添加class名ani， 并添加后边几个参数swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1.5s" swiper-animate-delay="0s"
swiper-animate-effect表示动画效果，通过animate.css选择需要的参数
3、调用的时候跟普通的不太一样，具体可参照官网
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
// loop: true,//无缝滚动，设置为true，切换到最后一张时会自动跳转到第一张
freeMode : false,//slide滑动时只滑动一格，并自动贴合wrapper
// 如果需要分页器
pagination: '.swiper-pagination',
mousewheelControl : true,//滚动鼠标时切换轮播图
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})