Swiper Observer(监听) - observer

在 Swiper 的上启用动态检查器(Mutation Observer),如果你更改swiper 的样式(隐藏/显示)或修改其子元素(添加/删除幻灯片),Swiper 会更新(重新初始化)并触发 observerUpdate 事件。
默认 false ,不开启动态检查器,此时可以使用 update() 方法手动更新。
注意:隐藏swiper 和删除slide 会触发两次事件,因为slide 不是swiper 真正的一级子元素。

observer信息

类型:
boolean
默认:
false
举例:
true
启用版本:
4.0.0

效果演示

使用非Swiper内置函数而是js删除第一个slide时分页器实时更新了。

slider1
slider2
slider3
 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script> 
  var mySwiper = new Swiper('.swiper', {
    observer: true, //开启动态检查器,监测swiper和slide
    pagination: {
      el: '.swiper-pagination',
    },
    on: {
      observerUpdate: function(){
        alert('监测到DOM变化,更新Swiper')
      }, 
    },
  })
  $('#btn1').click(function(){
    $(".swiper-slide1").remove(); // 删除Slide
    // $('.swiper').hide(); // 隐藏Swiper
  })
</script>