如何让WordPress Elementor Testimonial Carousel高度随内容自适应？

你的代码仅处理了点击切换按钮的场景，但Elementor的Testimonial Carousel基于Swiper.js开发，滑动切换轮播时不会触发按钮点击事件，因此高度不会自动更新，导致空白问题。

修复方案 #

直接监听Swiper的slideChange事件（滑动、点击按钮切换都会触发这个事件），同时在页面初始化时就计算一次高度，确保全场景下的高度自适应：

// 页面初始化时先计算一次高度，避免初始空白
adjustTestimonialHeight();

// 监听Elementor轮播组件加载完成，绑定Swiper切换事件
jQuery(document).on('elementor/frontend/init', function() {
    if (window.elementorFrontend) {
        window.elementorFrontend.hooks.addAction('frontend/element_ready/testimonial-carousel.default', function($scope) {
            // 获取当前轮播的Swiper实例
            var swiperInstance = $scope.find('.swiper-container')[0].swiper;
            // 监听slide切换完成事件
            swiperInstance.on('slideChange', adjustTestimonialHeight);
        });
    }
});

// 高度计算核心逻辑（抽离成独立函数复用）
function adjustTestimonialHeight() {
    var activeSlideHeight = jQuery('.swiper-slide-active .elementor-testimonial').height();
    // 确保获取到有效高度再设置
    if (activeSlideHeight) {
        jQuery('[isMobileCarousel] .elementor-widget-container').css('height', activeSlideHeight + 80);
    }
}

关键说明 #

1. Elementor钩子：elementor/frontend/init和frontend/element_ready/testimonial-carousel.default确保代码在轮播组件完全加载后执行，避免获取不到Swiper实例的问题
2. Swiper内置事件：slideChange覆盖了所有轮播切换场景（滑动、点击按钮、自动播放切换），比单独监听按钮点击更全面
3. 初始化计算：页面加载时先执行一次高度计算，解决初始状态下的空白问题
4. 安全判断：增加if (activeSlideHeight)避免因DOM未加载完全导致的无效高度设置

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