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>
