swiper是一个很好的全屏轮播的组件,以下为个人总结希望各位大牛光临指正:
1.普通的竖屏全屏轮播:
<head>内:
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/swiper.min.js"></script>
<body>内:
<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>
<script>内:
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
})
2.横屏:
var mySwiper = new Swiper ('.swiper-container', {
})
/*这是最简单的全屏轮播。许多属性没写,想写的话可以看api官网*/
3.横竖屏交叉的全屏轮播:
<head>内的引用一致;
<body>内:
<!-- Swiper -->
<div class="swiper-container swiper-container-h">
<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 " >Slide4</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide " >竖向内容一</div>
<div class="swiper-slide " >竖向内容二</div>
<div class="swiper-slide" >竖向内容三</div>
<div class="swiper-slide" >竖向内容四</div>
</div>
</div>
</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>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div>-->
</div>
<script>内:
direction: 'vertical',
})
var Swiper = new Swiper ('.swiper-container-h', {
4.普通的竖屏轮播加animation动画
<head>内:
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css"><!--可删-->
<script src="js/jquery-1.8.3.min.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<body>内:
<div class="swiper-container ">
<div class="swiper-wrapper">
<div class="swiper-slide " ><span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 1</span></div>
<div class="swiper-slide " ><span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 2</span></div>
<div class="swiper-slide" ><span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">Slide 3</span></div>
</div>
</div>
<!--effect:效果 duration:持续时间 delay:等待时间-->
<script>内:
//Swiper3.x、Swiper2.x
//var mySwiper = new Swiper ('.swiper-container', {
// onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
// swiperAnimateCache(swiper); //隐藏动画元素
// swiperAnimate(swiper); //初始化完成开始动画
// },
// onSlideChangeEnd: function(swiper){
// swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
// }
//})
//Swiper4.x
var mySwiper1 = new Swiper ('.swiper-container', {
direction: 'vertical',//竖屏
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
})
//横屏与竖屏基本一致,就去掉js中 direction:'vertical',一句就可以。
5.竖屏可以有两次不同动画的
<head>内:
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/jquery-1.8.3.min.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- <script src="js/swiper.animate1.0.2.min.js"></script>-->
<script src="js/swiper.animate-twice.min.js"></script>
<body>内:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide " ><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 1</span></div>
<div class="swiper-slide " ><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 2</span></div>
<div class="swiper-slide" ><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 3</span></div>
</div>
</div>
<script>内:
var mySwiper1 = new Swiper ('.swiper-container', {
direction: 'vertical',//竖屏
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
})
*没有解决问题:
animation动画不能与横竖屏都有的轮播一起使用:
相关的css与js 链接: https://pan.baidu.com/s/1geUiuQn 密码: wdx2