swiper 立体3D相册滑动效果

版权声明：我写的你不能转载，但是你可以复制啊。复制记得加关注啊（迷之微笑）。 https://blog.csdn.net/quhongqiang/article/details/85044761

<link rel="stylesheet" type="text/css" href="https://www.swiper.com.cn/dist/css/swiper.min.css">

body {
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            padding-top: 10px;
            padding-bottom: 30px;
        }
        .swiper-slide {
            background-position: center;
            background-size: cover;
            width: 240px;
            height: 320px;

        }
		.swiper-slide img{
			width: 100%;
			height: 100%;
		}

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="http://www.yuetuvip.com/img/banner4.jpg" >
            </div>
            <div class="swiper-slide">
            	<img src="http://www.yuetuvip.com/img/banner4.jpg" >
            </div>
            <div class="swiper-slide">
            	<img src="http://www.yuetuvip.com/img/banner4.jpg" >
            </div>
            <div class="swiper-slide">
            	<img src="http://www.yuetuvip.com/img/banner4.jpg" >
            </div>

        </div>
    </div>

<script src="https://www.swiper.com.cn/dist/js/swiper.min.js"></script>
    <script type="text/javascript">
        	var mySwiper = new Swiper('.swiper-container', {
        	effect: 'coverflow', //3d滑动
        	grabCursor: true,
        	centeredSlides: true,
        	slidesPerView: 'auto',
        	loop:true,
        	slidesPerView: 2,
        	coverflow: {
        		rotate: 0,  //设置为0
        		stretch: 0,
        		depth: 200,
        		modifier: 2,
        		slideShadows : true
        	}   
        });
    </script>

欢迎讨论！！~~~