Swiper Demo

最新推荐文章于 2023-10-08 09:23:11 发布

newbxin

最新推荐文章于 2023-10-08 09:23:11 发布

阅读量278

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/newbxin/article/details/126698207

版权


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">

  <title>Swiper demo 旋转进入的slide</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="package/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    html,body{
        position: relative;
        height: 100%;
	}
   *{ 
	    margin:0;
	    padding:0;
	}
    .swiper-container {
      width: 100%;
    }
    .swiper-slide {
      text-align: center;
    }
	.swiper-slide div{
		width:86%;
		border-radius:7px;
		margin:10px 0 10px 4%;
		}
	.swiper-slide div img{
		width:100%;
		display:block;
		border-radius:7px;
		}	
  </style>
</head>
<body>
  <img src="images/bg1.png" style="width:100%;">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><div><img src="images/pg2.png"></div></div>
      <div class="swiper-slide"><div><img src="images/pg3.png"></div></div>
      <div class="swiper-slide"><div><img src="images/pg1.png"></div></div>
      <div class="swiper-slide"><div><img src="images/pg4.png"></div></div>
      <div class="swiper-slide"><div><img src="images/pg2.png"></div></div>
      <div class="swiper-slide"><div><img src="images/pg3.png"></div></div>
    </div>
  </div>
  <img src="images/bg2.png" style="width:100%;">

  <script src="package/swiper-bundle.min.js"></script>
  <script>

    var swiper = new Swiper('.swiper-container', {
		    watchSlidesProgress : true,  //查看slide的progress
			resistanceRatio : 0, //禁止边缘移动
			on: {
				init: function(){
					slides = this.slides
					for(i=0; i< slides.length; i++){
						slide = slides.eq(i)
                        slide.css('zIndex', 100-i);  //设置slide的z-index层级
						}
					},
					
				resize: function(swiper){
					swiper.update()
					},	
					
				setTranslate: function(){
					slides = this.slides
					offsetAfter = this.width*0.95 //每个slide的位移值
					for(i=0; i< slides.length; i++){
						slide = slides.eq(i)
						progress = slides[i].progress

						if(progress <= 0){  //右边slide位移
						    slide.transform('translate3d('+(progress)*offsetAfter+'px, 0, 0) scale('+(1 - Math.abs(progress)/20)+')');
							slide.css('opacity',(progress+3));    //最右边slide透明
						}
						
						if(progress > 0){
						    slide.transform('rotate('+ (-progress)*5+'deg)');   //左边slide旋转
							slide.css('opacity',1 - progress);    //左边slide透明
						}
						}	
				    },
				setTransition: function(swiper, transition) {
						for (var i = 0; i < this.slides.length; i++) {
							var slide = this.slides.eq(i)
							slide.transition(transition);
						}
				},
			},
		});
  </script>
</body>
</html>