Swiper轮播插件的花式用法

Swiper轮播插件的花式用法 www.swiper.com.cn

cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。

引入css文件

<link rel="stylesheet" type="text/css" href="__STATIC__wap/css/swiper-3.3.1.min.css" />

引入js文件

<script src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js"></script>

html文件

<style>

.swiper-slide{

height: 180px;

}

.swiper-slide img{

width: 100%;

height: 100%;

}

@media screen and (min-width: 360px ) {

.swiper-slide{

height: 195px;

}

}

@media screen and (min-width: 375px ) {

.swiper-slide{

height: 210px;

}

}

@media screen and (min-width: 414px ) {

.swiper-slide{

height: 240px;

}

}

</style>

<!--轮播图-->

<div class="swiper-container" style="">

<div class="swiper-wrapper" style="">

<volist name="bo" id="d">

<div class="swiper-slide">

<img src="{:attach($d['url'],'item')}">

</div>

</volist>

</div>

</div><!--首页轮播-->

轮播js

<script type="text/javascript">

var mySwiper = new Swiper('.swiper-container',{

loop: true,

loopAdditionalSlides : 1,

autoplay: 3000,

preloadImages: true,

height : 280,

width : window.innerWidth, //你的slide宽度

speed : 400,

effect : 'coverflow',

slidesPerView: 2,

centeredSlides: true,

autoplayDisableOnInteraction : false,

coverflow: {

rotate: 45,

stretch: -10,

depth: 0,

modifier: 1,

slideShadows : false,

}

});

</script>