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-slid