轮播图插件Swiper的使用（懒加载+异步加载数据）

不见长安见晨雾

已于 2022-08-15 10:13:53 修改

阅读量2.2k

点赞数 1

分类专栏： Web前端文章标签： javascript 前端开发语言

于 2022-08-15 10:13:26 首次发布

本文链接：https://blog.csdn.net/fengsheng5210/article/details/126341369

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

HTML

引入swiper-bundle.css、swiper-bundle.js

<head>
    <link rel="stylesheet" href="swiper-bundle.css">
    <style>
	.swiper {
	    width: 600px;
	    height: 300px;
	}  
    </style>
</head>
<body>
    <div id="mySwiper" class="swiper">
    	<!--内容-->
	    <div class="swiper-wrapper"></div>
	    <!--分页-->
	    <div class="swiper-pagination"></div>
	    <!--上一个、下一个-->
	    <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div>
	</div>
    <script src="swiper-bundle.js"></script>
</body>

JS

实现懒加载轮播图+ajax获取数据

  new Swiper ('#mySwiper', {
     //显示几个图片设置
    slidesPerView: 1,
    //每一次切换图片个数
    slidesPerGroup:1,
    lazy: { loadPrevNext: true},
    // 分页器
    pagination: { el: '.swiper-pagination', clickable: true},  
    // 前进后退按钮
    navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev',},
    virtual: {
      slides: (function () {
        let list = ajaxLoadSwaiperList(); // 异步加载轮播图数据
        return list;      // 空返回[]
      })(),
	 renderSlide:function(slide, index){  // 懒加载渲染每一项
	        return '<div class="swiper-slide"><img width=600 height=300 data-src="00'+(index+1)+'.png" class="swiper-lazy"/></div>';
	      },
    },
    runCallbacksOnInit : true, // 每次切换轮播图会回调
    on:{
      init:function(){
          console.log('初始化，当前的slide序号是'+this.activeIndex);
      },
      // 轮播图切换
      slideChange:function(swiper){
        console.log(this.activeIndex);   // 当前下标，从0开始
      },
      lazyImageReady: function(swiper, slideEl, imageEl){
        //  console.log(slideEl); //懒加载图片所在slide的DOM
        //  console.log(imageEl); //懒加载图片的DOM
      }
    }
  })

更新轮播图

// 将现有的slides移除掉
mySwiper.virtual.removeAllSlides(); 
mySwiper.virtual.cache=[]; 
// 设置新的slide数据,例如[]
mySwiper.virtual.slides = [];
// 更新 
mySwiper.virtual.update();