swiper官方文档案例-缩小淡出效果

1.按照官网正常创建swiper
2.样式部分

.swiper-container {
      width: 100%;
      height: 100%;
    }
.swiper-slide img{
       width:100%;
       height:auto;
       min-height:100%;
       transition:1s linear 2s;
       transform:scale(1.1,1.1);
}
.swiper-slide-active img,.swiper-slide-duplicate-active img{
        transition:6s linear;
        transform:scale(1,1);
}

3.js部分

var swiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      speed:500,
      spaceBetween: 30,
      effect: 'fade',
      loop:true,//必须
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });