Slick滑块：将上/下一页元素标题设为当前Div（WordPress）

没问题，我来帮你搞定这个需求——让Slick的上一页、下一页按钮显示当前（或者对应）滑块的内容，咱们一步步来：

第一步：调整ACF循环的HTML结构 #

首先得把每个滑块的目标内容（比如你这里的视频标题、日期）存到滑块元素的自定义data属性里，这样JS能轻松拿到数据，不用费劲遍历内部DOM。修改你的循环代码：

<?php if (have_rows('videofeed2','option')): ?>
<div class="slider-popular">
  <?php while (have_rows('videofeed2','option')) : the_row(); 
    // 先把字段值存变量，方便复用和转义
    $videoTitle = get_sub_field('video_title','option');
    $videoDate = get_sub_field('date','option');
  ?>
  <!-- 给滑块容器加data属性，存标题和日期 -->
  <div class="slider-go-wrap" 
       data-slide-title="<?php echo esc_attr($videoTitle); ?>" 
       data-slide-date="<?php echo esc_attr($videoDate); ?>">
    <div class="pop-title desktop-title">
      <div class="video-title-wrap">
        <h2><?php echo $videoTitle; ?></h2>
        <div class="pop-dura"><?php echo $videoDate; ?></div>
      </div>
    </div>
    <!-- 这里放你滑块里的其他内容，比如视频缩略图、播放按钮之类的 -->
  </div>
  <?php endwhile; ?>
</div>
<?php endif; ?>

小提示：用esc_attr()转义属性值，能避免XSS风险和HTML语法报错，好习惯要保持~

第二步：添加导航按钮的HTML容器 #

如果还没加prev/next按钮，就在滑块外面添加上：

<div class="slider-navigation">
  <button class="slick-prev-btn">上一页</button>
  <button class="slick-next-btn">下一页</button>
</div>

第三步：编写JS逻辑更新按钮文本 #

接下来用Slick的回调事件，在滑块初始化和切换时更新按钮内容，分两种常用场景，你可以按需选择：

场景1：按钮显示当前滑块的内容 #

比如prev/next按钮都显示当前活跃滑块的标题：

jQuery(document).ready(function($) {
  // 初始化Slick滑块，关联导航按钮
  const $slider = $('.slider-popular');
  $slider.slick({
    prevArrow: $('.slick-prev-btn'),
    nextArrow: $('.slick-next-btn'),
    // 你的其他Slick配置，比如单滑块显示、循环等
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true
  });

  // 封装更新按钮文本的函数，方便复用
  function updateNavText() {
    // 获取当前活跃的滑块
    const $currentSlide = $slider.find('.slick-current');
    // 从data属性里拿标题
    const currentTitle = $currentSlide.data('slide-title');
    
    // 更新按钮文本，也可以加日期，比如`上一页：${currentTitle} | ${currentDate}`
    $('.slick-prev-btn').text(`上一页：${currentTitle}`);
    $('.slick-next-btn').text(`下一页：${currentTitle}`);
  }

  // 滑块初始化完成后，先更新一次文本
  updateNavText();

  // 每次滑块切换完成后，更新文本
  $slider.on('afterChange', updateNavText);
});

场景2：按钮显示对应滑块的内容（prev显示上一个，next显示下一个） #

如果想让prev按钮显示上一个滑块的标题，next显示下一个的，就把上面的updateNavText函数改成这样：

function updateNavText() {
  const $slides = $slider.find('.slick-slide');
  const currentIndex = $slider.slick('slickCurrentSlide');
  const totalSlides = $slides.length;

  // 计算上一个滑块的索引（循环场景下处理边界）
  const prevIndex = currentIndex === 0 ? totalSlides - 1 : currentIndex - 1;
  // 计算下一个滑块的索引
  const nextIndex = currentIndex === totalSlides - 1 ? 0 : currentIndex + 1;

  // 拿到对应滑块的标题
  const prevTitle = $slides.eq(prevIndex).data('slide-title');
  const nextTitle = $slides.eq(nextIndex).data('slide-title');

  // 更新按钮文本
  $('.slick-prev-btn').text(`上一页：${prevTitle}`);
  $('.slick-next-btn').text(`下一页：${nextTitle}`);
}

可选：给按钮加美化样式 #

如果觉得按钮太朴素，加几行CSS美化下：

.slider-navigation {
  margin: 15px 0;
  display: flex;
  gap: 10px;
}
.slick-prev-btn, .slick-next-btn {
  padding: 8px 16px;
  border: none;
  background: #2c3e50;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}
.slick-prev-btn:hover, .slick-next-btn:hover {
  background: #34495e;
}

这样就搞定啦，按钮文本会跟着滑块切换自动更新，完全匹配你ACF里的内容~

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