Swiper Observer(监听) - observeSlideChildren

将动态检查器(Mutation Observer)同时监测Swiper 的子元素(wrapper、pagination、navigation、scrollbar)。 当新增/删除这些子元素时,则更新Swiper 并触发 observerUpdate 事件。
由于observeSlideChildren 的监测目标是swiper , 因此与container 变化时只会触发一次事件。也就是隐藏container、删除wrapper、删除pagination、删除navigation、删除scrollbar 触发一次。删除slide 另外触发一次。

observeSlideChildren信息

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

效果演示

pagination、scrollbar、navigation初始化时也会触发一次

slider1

slider2
slider3
 
 
 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script> 
  var mySwiper = new Swiper('.swiper', {
    observer: true,  //开启动态检查器,监测swiper和slide
    observeSlideChildren: true, //监测Swiper的子元素wrapper、pagination、navigation、scrollbar或其他一级子元素
    pagination: {
      el: '.swiper-pagination',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    on: {
      observerUpdate: function(){
        console.log('监测到DOM变化,更新Swiper')
      }, 
    },
  })
  $('#btn1').click(function(){
    //$(".swiper").hide();
    //$(".swiper-slide1").remove(); 
    //$("#wrapper").remove();
    $("#pagination").remove(); 
    $("#scrollbar").remove(); 
    //$("#button-prev").remove(); 
    //$("#button-next").remove(); 
  })
  
</script>