WordPress WPBakery自定义Flickity轮播不显示幻灯片计数如何解决

根因梳理 #

• jQuery遍历方法书写错误：原代码中直接给$element.each赋值函数，覆盖了jQuery原生的each遍历逻辑，函数内部的初始化逻辑完全没有执行
• 选择器无作用域限制：直接全局选择$('.grve-carousel-wrapper')、$('.carousel-status')，如果页面存在多个轮播组件会出现选择混乱，且HTML中外层div也带有carousel-status类，会同时选中div和用于展示计数的p标签，导致文本赋值异常
• 缺少初始状态触发：仅绑定了change.flickity事件，页面首次加载完成后没有主动调用状态更新方法，所以初始状态下计数区域为空
• 存在重复初始化Flickity的风险：WPBakery的轮播组件已经默认初始化了Flickity，直接调用.flickity()会重复初始化，可能导致实例异常

修复后的JS代码 #

flexibleCarouselNumber: function(){
  var $element = $('.grve-flexible-advanced-carousel');
  // 正确使用jQuery each遍历
  $element.each(function(){
    // 限制选择器在当前轮播组件范围内，避免全局选择混乱
    var $carouselWrapper = $(this).closest('.grve-carousel-wrapper');
    // 仅选中p标签的计数容器，排除外层带同名类的div
    var $carouselStatus = $carouselWrapper.find('p.carousel-status');
    // 直接获取已初始化的Flickity实例，不重复初始化
    var flkty = $(this).data('flickity');
    
    if(!flkty || !$carouselStatus.length) return;

    function updateStatus() {
      var cellNumber = flkty.selectedIndex + 1;
      $carouselStatus.text( cellNumber + '/' + flkty.slides.length );
    }

    // 绑定切换事件
    $carouselWrapper.on( 'change.flickity', updateStatus );
    // 初始加载时主动触发一次，显示初始计数
    updateStatus();
  });
}

HTML优化建议 #

可以把外层div上多余的carousel-status类移除，避免后续选择器误判，修改后如下：

<div class="grve-element grve-carousel grve-flexible-carousel">
<div class="grve-carousel-wrapper">
    <p class="carousel-status"></p>
    <!-- 剩余原有代码保持不变 -->

内容的提问来源于stack exchange，提问作者tonywd