swiper等间距五图轮播效果

2024-12-05 Umming jQuery插件评论(0) 浏览(72)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Swiper的切换</title>
  <link href="https://cdn.bootcss.com/Swiper/5.3.7/css/swiper.min.css" rel="stylesheet">

  <style>
    @charset "utf-8";

    /* CSS Document */
    body {
      margin: 0;
    }

    * {
      outline: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;
    }

    #certify {
      position: relative;
      width: 1200px;
      margin: 0 auto
    }

    #certify .swiper-container {
      -webkit-perspective: 120px;
      -moz-perspective: 120px;
      -o-perspective: 120px;
      perspective: 120px;
    }

    #certify .swiper-wrapper {
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    #certify .swiper-slide {
      width: 240px;
      height: 240px;
      background: #fff;
      box-shadow: 0 8px 30px #ddd;
      transform-style: preserve-3d;
    }

    #certify .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    #certify .swiper-button-prev {
      left: -30px;
      width: 45px;
      height: 45px;
      background: url(images/ga11.png) center center no-repeat;
      background-size: contain;
    }

    #certify .swiper-button-prev:after,
    #certify .swiper-button-next:after {
      display: none;
    }

    #certify .swiper-button-next {
      right: -30px;
      width: 45px;
      height: 45px;
      background: url(images/ga12.png) center center no-repeat;
      background-size: contain;
    }
  </style>

</head>

<body>
  <div id="certify">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src=images/b1.jpg" />
        </div>
        <div class="swiper-slide"><img src="images/b1.jpg" />
        </div>
        <div class="swiper-slide"><img src="images/b1.jpg" />
        </div>
        <div class="swiper-slide"><img src="images/b1.jpg" />
        </div>
        <div class="swiper-slide"><img src="images/b1.jpg" />
        </div>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <script src="js/jquery.js"></script>
  <script src="https://cdn.bootcss.com/Swiper/5.3.7/js/swiper.min.js"></script>
  <script>
    
    var width = $('#certify .swiper-slide').width() / 2;
    certifySwiper = new Swiper('#certify .swiper-container', {
      watchSlidesProgress: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      loopedSlides: 5,
      autoplay: !true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        progress: function (progress) {
          for (i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            modify = 1;
            scale = 1 - Math.abs(slideProgress) / 5;
            translate = 0 + 'px';
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * (1-scale);
              translate = (slideProgress/Math.abs(slideProgress)) * modify * width + 'px';
            }

            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform('translate3d(' + translate + ',0px,0) scale(' + scale + ')');
            slide.css('zIndex', zIndex);
            slide.css('opacity', scale);
            if (Math.abs(slideProgress) > 2.5) {
              slide.css('opacity', 0);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
          }

        }
      }

    })
  </script>
</body>

</html>

标签: swiper

上一篇： video自动播放实现

下一篇： swiper环状滚动效果

本文链接：https://www.umming.com/jquery/374.html

声明：本站信息由网友自行发布或来源于网络，真实性、合法性由发布人负责，请仔细甄别！本站只为传递信息，我们不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站删除！

也许你还会对下面的内容感兴趣：

尤明明Blog

swiper等间距五图轮播效果

搜索

日历

热门文章

存档

标签

统计

swiper等间距五图轮播 效果

搜索

日历

热门文章

存档

标签

统计

swiper等间距五图轮播效果