swiper 入门

1、引入文件

<script src="public/js/swiper.min.js"></script>
<link rel="stylesheet" href="public/css/swiper.min.css">

2、滑动图片的HTML代码结构

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="public/images/poster_7.png" class="img_responsive margin_auto" >
		</div>
		<div class="swiper-slide">
			<img src="public/images/poster_6.png" class="img_responsive margin_auto" >
		</div>
		<div class="swiper-slide">
			<img src="public/images/poster_5.png" class="img_responsive margin_auto" >
		</div>
		<div class="swiper-slide">
			<img src="public/images/poster_4.png" class="img_responsive margin_auto" >
		</div>
		<div class="swiper-slide">
			<img src="public/images/poster_3.png" class="img_responsive margin_auto" >
		</div>
		<div class="swiper-slide">
			<img src="public/images/poster_2.png" class="img_responsive margin_auto" >
		</div>
		<div class="swiper-slide">
			<img src="public/images/poster_1.png" class="img_responsive margin_auto" >
		</div>
	</div>
	<!-- 如果需要滚动条 -->
	<!--<div class="swiper-scrollbar"></div>-->
	<!-- 如果需要分页器 -->
	<!-- 	<div class="swiper-pagination"></div>-->
</div>

3、页面加载完之后调用方法

//广告位滑动
mySwiper = new Swiper ('.swiper-container', {
	//滑动方向为水平
	direction: 'horizontal',
	//是否循环
	loop: true,
	//是否自动滑动
	//autoplay:5000,
	//分页器的位置，在class为swiper-pagination的容器中，容器在页面任意位置，不受限制
	pagination: '.swiper-pagination',
	//滑动之后触发的事件
	onSlideChangeEnd: function(swiper){
		//获取当前
		var activeIndex = swiper.activeIndex;
	}
	// 如果需要滚动条
	//scrollbar: '.swiper-scrollbar'
});
//显示前一张页面
$('.btn_prev').click(function(){
	mySwiper.slidePrev();
});
//显示前一张页面
$('.btn_next').click(function(){
	mySwiper.slideNext();
});