swiper异形切换(可视化)

最新推荐文章于 2023-08-29 16:47:56 发布

Mr_yq

最新推荐文章于 2023-08-29 16:47:56 发布

阅读量4k

点赞数 1

文章标签： swiper swiper异形

本文链接：https://blog.csdn.net/Mr_yq/article/details/100994249

版权

swiper 版本 Swiper4.x

自己用到这个组件，数值老是调不理想做了个简单demo,方便以后调用，需要用到的试试吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.swiper.com.cn/dist/css/swiper.min.css">
  <title>Document</title>
  <script src="https://www.swiper.com.cn/dist/js/swiper.min.js"></script>
  <style>
  *{moz-user-select: -moz-none; 
  -moz-user-select: none; 
  -o-user-select:none; 
  -khtml-user-select:none; 
  -webkit-user-select:none; 
  -ms-user-select:none; 
  user-select:none;
  }
  .btn {display: flex;justify-content: space-between;padding: 40px;}
  </style>
</head>
<body>
  <div class="box">
    <div class="swiper-container" style="height:300px">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="background-color:cadetblue">Slide 1</div>
          <div class="swiper-slide" style="background-color:chartreuse">Slide 2</div>
          <div class="swiper-slide" style="background-color:darkblue">Slide 3</div>
        </div>
    </div>
    <div class="btn">
    </div>
  </div>
</body>
</html>
<script>
  function _swiper(rotate,stretch,depth,modifier) {
    var mySwiper2 = new Swiper('.swiper-container', {
        initialSlide :1,
        autoplay: false,
        loop: false,//开启循环
        slidesPerView: 2,//设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
        effect:'coverflow',//可以实现3D效果的轮播,
        centeredSlides:true,//设定为true时，activeslide会居中，而不是默认状态下的居左。
        coverflowEffect: {
            rotate,//slide做3d旋转时Y轴的旋转角度。默认50。
            stretch,//每个slide之间的拉伸值，越大slide靠得越紧。 
            depth,//slide的位置深度。值越大z轴距离越远，看起来越小。 
            modifier,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
            slideShadows : true//开启slide阴影。默认 true。
        }
    });
  }
  var rotate=0,stretch=0,depth=0,modifier=0;

  var abab = document.querySelector('.btn');
  abab.innerHTML = `
                <div><p>rotate:</p>
                <button class="rotateja">+</button>
                <span class="rotate">0</span>
                <button class="rotatejj">-</button></div>
                <div><p>stretch:</p>
                <button class="stretchja">+</button>
                <span class="stretch">-18</span>
                <button class="stretchjj">-</button></div>
                <div><p>depth:</p>
                <button class="depthja">+</button>
                <span class="depth">85</span>
                <button class="depthjj">-</button></div>
                <div><p>modifier:</p>
                <button class="modifierja">+</button>
                <span class="modifier">5</span>
                <button class="modifierjj">-</button></div>`
  var aryss = ['rotate','stretch','depth','modifier'];
  var rotate=0,stretch=-18,depth=85,modifier=5;
  _swiper(rotate,stretch,depth,modifier)
  aryss.forEach(function(el){
      abab.querySelector(`.${el}ja`).onclick = function(){
         var val =  Number(abab.querySelector(`.${el}`).innerText);
         val++;
         abab.querySelector(`.${el}`).innerText = val;
         switch (el) {
             case 'rotate':
                 rotate = val;
                 break;
             case 'stretch':
                 stretch = val;
                 break;
             case 'depth':
                 depth = val;
                 break
             default:
                 modifier = val;
                 break;
         }
         _swiper(rotate,stretch,depth,modifier)
      }
      abab.querySelector(`.${el}jj`).onclick = function(){
          var val =  Number(abab.querySelector(`.${el}`).innerText);
          val--;
          abab.querySelector(`.${el}`).innerText = val;
          switch (el) {
              case 'rotate':
                  rotate = val;
                  break;
              case 'stretch':
                  stretch = val;
                  break;
              case 'depth':
                  depth = val;
                  break
              default:
                  modifier = val;
                  break;
          }
          _swiper(rotate,stretch,depth,modifier)
       }
  })
</script>

Mr_yq

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
swiper异形切换(可视化)

swiper 版本 Swiper4.x 自己用到这个组件，数值老是调不理想做了个简单demo,方便以后调用，需要用到的试试吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https...
复制链接

扫一扫