Swiper

swiper 是一款滑动特效插件, 能实现焦点图、Tab切换、触屏多图切换等常用效果
<link rel="stylesheet" href="swiper.min.css">
<style type="text/css">
	body,html{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}
	.swiper-container {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	}  
	.swiper-wrapper{
		display: flex;
		width: 100%;
		height: 100%;
	}
	.swiper-wrapper .swiper-slide{
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
<script src="jquery.js"></script>
<script src="swiper.js"></script>
<script>
	var mySwiper = new Swiper ('.swiper-container', {
	    direction: 'vertical',  //垂直方向
	    loop: true,   //循环
	    // 如果需要分页器
	    pagination: '.swiper-pagination'
	});
</script>

See Demo

direction 动画方向

var mySwiper = new Swiper('.swiper-container', {
	direction: 'vertical'  //垂直方向
});

var mySwiper = new Swiper('.swiper-container', {
	//默认值
	direction: 'horizontal'  //水平方向
});

initialSlide 初始显示

initialSlide 设置页面加载后默认显示的索引,默认为 0

var mySwiper = new Swiper('.swiper-container', {
	initialSlide: 2 //显示索引为 2 的元素
});

freeMode 反弹

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script>
	var mySwiper = new Swiper('.swiper-container', {
		freeMode : true,  //开启 freeMode  autoplay 失效
		direction: 'horizontal'  //水平方向
	});
</script>

See Demo


slidesPerView 网格

设置容器能够同时显示的子元素的数量

<style type="text/css">
	.swiper-container {
	    width: 500px;
	    height: 500px;
	}  
	.swiper-container .swiper-slide{
		width: 33.33%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.swiper-container .swiper-slide:nth-child(2n+1){
		color: #f00;
		background: #d1d1d1;
	}
</style>
<div class="swiper-container">
    <div class="swiper-wrapper">
		<div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>        
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
<script>
	var mySwiper = new Swiper('.swiper-container', {
		pagination : '.swiper-pagination',
		slidesPerView : "auto"
	});
</script>

See Demo


loop 循环

var mySwiper = new Swiper('.swiper-container', {
	loop : true
});

正常效果配置 loop 属性就可以了, 如果使用了 slidesPerView 配置, 需要在配置一个 loopedSlides 属性

var mySwiper = new Swiper('.swiper-container', {
	slidesPerView : 'auto',
	loop : true,
	loopedSlides :8 //有多少个 slide 元素
});