swiper2个常用用法3D覆盖和左右留白

程序员文章站 2022-07-13 09:12:53

...

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
	<style>
.swiper-container{
	height: 300px;
	width: 500px;
}
.swiper-slide{
	height: 300px;
	width: 250px;
	border:1px solid #ccc;
}
.red{
	background: red;
}
.green{
	background: green;
}
.blue{
	background: blue;
}
.orange{
	background: orange;
}
.pink{
	background: pink;
}
	</style>
</head>
<body>
 <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide red"></div>
        <div class="swiper-slide green"></div>
        <div class="swiper-slide blue"></div>
        <div class="swiper-slide orange"></div>
        <div class="swiper-slide pink"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

 <div class="swiper-container2">
    <div class="swiper-wrapper">
        <div class="swiper-slide red"></div>
        <div class="swiper-slide green"></div>
        <div class="swiper-slide blue"></div>
        <div class="swiper-slide orange"></div>
        <div class="swiper-slide pink"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>	
<script>
	 var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                loop:true,
                //autoplay:1000,
                //grabCursor:true,
                centeredSlides:true,
                slidesPerView:'auto',
                effect:'coverflow',
                coverflow:{
                    rotate:0,//滑动时旋转角度
                    stretch:100,//聚合宽度
                    depth:100,//景深
                    modifier:1,//覆盖叠加层数
                    slideShadows:false//是否阴影
                }
            });
</script>

<script>
    var swper2 = new Swiper('.swiper-container2', {
    	direction: 'horizontal',
      	spaceBetween : 10,
	    loop: true,
	    slidesPerView : 1.2,
	    centeredSlides : true
    });
  
</script>
</body>
</html>

上一篇：微信小程序实现类3D轮播图

下一篇：【3D游戏编程】3. 空间与运动