获取当前Slick Slider幻灯片对应的ACF上一个与下一个标题

嘿，我来帮你搞定这个问题！要实现这个需求，咱们得结合PHP把所有ACF视频标题先收集好，再利用Slick的切换事件动态更新上下标题——毕竟滑块是前端动态切换的，没法直接用PHP实时获取当前项的上下内容。

步骤1：修正ACF循环并收集所有标题 #

首先，我注意到你代码里开头判断的是videofeed字段，但循环的是videofeed2，大概率是笔误，先统一字段名。然后我们要把所有视频标题收集到数组里，方便前端调用：

<?php 
// 统一ACF repeater字段名（这里假设正确字段是videofeed2）
if(have_rows('videofeed2','option')): 
    // 收集所有视频标题到PHP数组
    $video_titles = [];
    while(have_rows('videofeed2','option')) : the_row();
        $video_titles[] = get_sub_field('video_title');
    endwhile;

    $total_slides = count($video_titles);
    $current_index = 0;
?>
<div class="slider-popular">
    <?php while(have_rows('videofeed2','option')) : the_row(); ?>
    <div class="slider-go-wrap" data-slide-index="<?php echo $current_index; ?>">
        <h2 class="video-title"><?php the_sub_field('video_title'); ?></h2>
        <!-- 这里可以添加你的视频内容、描述等其他ACF字段 -->
    </div>
    <?php $current_index++; endwhile; ?>
</div>

<!-- 放置上下标题的容器 -->
<div class="video-controls">
    <div class="prev-title-popular"></div>
    <div class="next-title-popular"></div>
</div>

<!-- 将PHP数组转为JS可读取的格式 -->
<script>
const allVideoTitles = <?php echo json_encode($video_titles); ?>;
const totalSlides = <?php echo $total_slides; ?>;
</script>
<?php endif; ?>

步骤2：用Slick事件动态更新上下标题 #

接下来初始化Slick滑块，并利用它的afterChange事件来更新上下标题，同时处理边界情况（比如第一个滑块的上一个是最后一个）：

jQuery(document).ready(function($) {
    // 初始化Slick Slider，根据你的需求调整配置
    $('.slider-popular').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        infinite: true, // 如果需要循环滚动，保持这个配置
        // 其他你需要的配置：比如autoplay、dots等
    });

    // 定义更新导航标题的函数
    function updateNavTitles(currentSlideIndex) {
        // 处理上一个滑块的索引：当前是第一个时，上一个是最后一个
        const prevIndex = currentSlideIndex === 0 ? totalSlides - 1 : currentSlideIndex - 1;
        // 处理下一个滑块的索引：当前是最后一个时，下一个是第一个
        const nextIndex = currentSlideIndex === totalSlides - 1 ? 0 : currentSlideIndex + 1;

        // 更新页面上的标题内容
        $('.prev-title-popular').text(allVideoTitles[prevIndex]);
        $('.next-title-popular').text(allVideoTitles[nextIndex]);
    }

    // 页面加载完成后，先初始化默认显示的上下标题（默认第一个滑块）
    updateNavTitles(0);

    // 当滑块切换完成后，更新上下标题
    $('.slider-popular').on('afterChange', function(event, slick, currentSlide) {
        updateNavTitles(currentSlide);
    });
});

关键点说明 #

• 数据传递：通过PHP把所有ACF标题转为JSON格式的JS数组，确保前端能获取到所有滑块的标题数据。
• 边界处理：专门处理了第一个和最后一个滑块的上下项逻辑，避免出现索引越界的问题。
• 事件时机：使用afterChange事件而不是beforeChange，确保滑块切换完成后再更新标题，显示更准确。

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