swiper轮播图（中间大，两侧小）

Posted 2021-03-17 formerwhite

<link rel="stylesheet" href="plugins/swiper.min.css">

                <div id="certify" class="col-md-12">
                <div class="swiper-container" style="width: 90%;height: 450px;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><a href=""><img src="img/index/矩形备份 8.png"></a><span>aaa</span></div>
                        <div class="swiper-slide"><a href=""><img src="img/index/矩形(2).png"></a><span>bbb</span></div>
                        <div class="swiper-slide"><a href=""><img src="img/index/矩形备份 7.png"></a><span>ccc</span></div>
                        <div class="swiper-slide"><a href=""><img src="img/index/u14.jpg"></a><span>ddd</span></div>
                        <div class="swiper-slide"><a href=""><img src="img/index/u19.jpg"></a><span>eee</span></div>
                    </div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"><img src="img/index/编组 5备份.png" alt=""></div>
                    <div class="swiper-button-next"><img src="img/index/编组 5.png" alt=""></div>
                </div>
            </div>

<script src="plugins/swiper.min.js"></script>
<script>        
        var mySwiper = new Swiper ('.swiper-container', {
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: true,
            loop: true,
            loopedSlides: 3,
            autoplay: 3000,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            pagination: '.swiper-pagination',
            //paginationClickable :true,
            onProgress: function(swiper, progress) {
                for (i = 0; i < swiper.slides.length; i++) {
                    var slide = swiper.slides.eq(i);
                    var slideProgress = swiper.slides[i].progress;
                    modify = 1;
                    if (Math.abs(slideProgress) > 3) {
                        modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                    }
                    translate = slideProgress * modify * 380 + 'px';
                    scale = 1 - Math.abs(slideProgress) / 2.5;
                    zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) > 1) {
                        slide.css('opacity', 0);
                    }
                }
            },
            onSetTransition: function(swiper, transition) {
                for (var i = 0; i < swiper.slides.length; i++) {
                    var slide = swiper.slides.eq(i)
                    slide.transition(transition);
                }

            },
            //处理分页器bug
            // onSlideChangeStart: function(swiper) {
            //  if (swiper.activeIndex == 4) {
            //      swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
            //      console.log(swiper.bullets.length);
            //  }
            // }
            })
            </script>

#certify {
    position: relative;
    width: 100%;
    margin: 72px auto 0
}

#certify .swiper-container {
    /* padding-bottom: 60px; */
}

#certify  .swiper-slide {
    width: 854px;
    height: 450px;
  background: #fff;
  position: relative;
}
#certify  .swiper-slide img{
  width: 100%;
  height: 100%;
    display:block;
}
#certify  .swiper-slide span {
  width: 100%;
  height: 80px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size:30px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(255,255,255,1);
  background:rgba(0,0,0,0.5);
  text-align: center;
  line-height: 80px;
}

#certify .swiper-pagination {
    width: 100%;
    bottom: 20px;
}

/* #certify .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
    border: 3px solid #fff;
    background-color: #d5d5d5;
    width: 10px;
    height: 10px;
    opacity: 1;
} */

#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {
    border: 3px solid #00aadc;
    background-color: #fff;
}

#certify .swiper-button-prev {
  left: 0;
  width: 80px;
  font-size: 30px;
  text-align: center;
  line-height: 80px;
  height: 80px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
}

/* #certify .swiper-button-prev:hover {
    background-position: 0 -46px;
    background-size: 100%
} */

#certify .swiper-button-next {
  right: 0;
  font-size: 30px;
  text-align: center;
  line-height: 80px;
  width: 80px;
  height: 80px;
  background: inherit;
  background-color: rgba(242, 242, 242, 1);
  border: none;
}