利用swiper插件实现3D轮播效果

责编:menVScode 2018-04-19 11:06 阅读(1552)

头部引入 swiper-3.4.2.min.css,底部引入 swiper-3.4.2.jquery.min.js。

css代码

#main {  
    width: 100%;  
}  
#main .swiper-container {  
    width: 95%;  
    padding-top: 0.5rem;  
}  
#main .swiper-slide {  
    background-position: center;  
    background-size: 130% 120%;  
    width: 60%;  
}  
#main .swiper-slide img {  
    display: block;  
    width: 100%;  
}  
#main .swiper-button-next, .swiper-button-prev {  
    top: 5rem;  
    width: 10%;  
}  
#main .swiper-button-next {  
    /*background: url(); */
}  
#main .swiper-button-prev {  
    /*background: url();  */
}

html代码

<div class="container">  
    <!-- 轮播 -->  
    <div id="main">  
        <div class="swiper-container" id="looper">  
            <div class="swiper-wrapper">  
                <div class="swiper-slide"><img src="http://f.51fanbei.com/preEnv/c9750fe39c67a56c.jpg" alt=""></div>
                <div class="swiper-slide"><img src="http://f.51fanbei.com/online/6ddc4381d35cbeed.jpg" alt=""></div>
                <div class="swiper-slide"><img src="http://f.51fanbei.com/online/b915a0c63749e5be.jpg" alt=""></div>
            </div>  
            <div class="swiper-button-next"></div>  
            <div class="swiper-button-prev"></div>  
        </div>  
    </div>  
</div>  

js调用

 var swiper = new Swiper('#looper', {
 	touchRatio : -1,//利用touchRatio制作与拖动方向相反的Swiper
    loop : true,
    slidesPerView:5,
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 'auto',
    coverflow: {
        rotate: 0,// 旋转的角度
        stretch: 100,// 拉伸   图片间左右的间距和密集度
        depth: 50,// 深度   切换图片间上下的间距和密集度
        modifier: 3,// 修正值 该值越大前面的效果越明显
        slideShadows : false// 页面阴影效果
    }
});

coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数,可选值:

     rotate:slide做3d旋转时Y轴的旋转角度。默认50。

     stretch:每个slide之间的拉伸值,越大slide靠得越紧。 默认0。

     depth:slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。

     modifier:depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。

     slideShadows:开启slide阴影。默认 true。

标签: swiper 轮播
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码