WordPress中Wow Carousel自动轮播时获取当前元素文本的问题

问题分析 #

你的代码仅处理了手动点击前后箭头的场景，但轮播自动播放切换时，没有触发更新文本的函数。另外注意到代码里选择器写的是h4，但HTML结构里对应的是h3，这会导致无法正确获取文本，需要先修正这个选择器错误。

解决方案 #

Wow Carousel基于Owl Carousel开发，我们可以利用Owl Carousel自带的changed.owl.carousel事件——这个事件会在轮播切换完成（包括自动播放、手动切换）时触发，此时center类已经完成更新，正好可以调用文本更新函数。

修改后的代码如下：

jQuery(document).ready(function() {
    function myFunction() {
        // 修正选择器：匹配HTML里的h3标签
        let title = jQuery("#testimonial-slider-5781 .center .testimonial-5781 h3").text().trim();
        jQuery("#service-title h3").text(title);
    }   

    // 页面加载完成后先执行一次，初始化显示正确文本
    myFunction();

    // 手动点击前后箭头时触发更新
    jQuery('.owl-prev, .owl-next').click(function(){
        myFunction();
    });

    // 监听轮播切换完成事件（自动播放、手动切换都会触发）
    jQuery("#testimonial-slider-5781").on("changed.owl.carousel", function() {
        myFunction();
    });
});

补充说明 #

• changed.owl.carousel是Owl Carousel的核心事件，触发时机为轮播当前项切换完成后，确保center类已正确添加到新幻灯片上。
• 使用.trim()可以去除文本两端的空白字符，避免显示多余空格。
• 页面初始化时调用myFunction()，保证页面刚加载就能显示当前中心幻灯片的文本。

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