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{
    100%;
   height: 100%;
 }
 
 @media screen and (min- 360px ) {
    
   .swiper-slide{
     height: 195px;
   }
    
 }
 
 @media screen and (min- 375px ) {
    
   .swiper-slide{
     height: 210px;
   }
    
 }
 
 @media screen and (min- 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>