使用Swiper制作3d旋转木马轮播图

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .swiper-container {
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto 0;
        }
        .swiper-slide {
            width: 600px;
            height: 400px;
        }
        .swiper-slide>img {
            width: 100%;
            height: 100%;
        }
    </style>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <a href='javascript:;' class="swiper-slide">
                <img src="./1.jpg">
            </a>
            <a href='javascript:;' class="swiper-slide">
                <img src="./2.jpg">
            </a>
            <a href='javascript:;' class="swiper-slide">
                <img src="./3.jpg">
            </a>
        </div>
        <div class="swiper-pagination"></div>
    </div>

<script>
    var swiper = new Swiper('.swiper-container', {
		loop: true,
		effect: 'coverflow',
		centeredSlides: true,
		slidesPerView: 'auto',
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
		coverflowEffect: {
			rotate: 10, //滑动时旋转角度
			stretch: 0, //聚合宽度
			depth: 200, //景深
			modifier: 1, //覆盖叠加层数
			slideShadows: false //是否阴影
		}
	});
</script>