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',
      },
    });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。