在WordPress中结合ACF与Slick Slider获取当前幻灯片前后标题

Hey there! Let's work through this problem together—since you're using Slick Slider with ACF in WordPress, and you've got 3 active slides at once (with the middle one carrying both .slick-active and .slick-current classes), here's a straightforward way to grab the previous and next slide's post titles:

Step 1: Update Your ACF/PHP Loop to Store Slide Data #

First, we need to attach key slide data (like title and index) to each slide container using HTML data-* attributes. This makes it easy to fetch the info later with JavaScript:

<?php if (have_rows('videofeed','option')): ?>
<div class="slider-popular">
  <?php 
  $slide_counter = 0;
  // Double-check your ACF field name—you referenced both 'videofeed' and 'videofeed2' in your snippet!
  while (have_rows('videofeed','option')) : the_row(); 
    $slide_counter++;
    $video_title = get_sub_field('video_title'); // Replace with your actual ACF field name
  ?>
  <div class="slider-go-wrap" 
       data-slide-index="<?php echo $slide_counter; ?>" 
       data-slide-title="<?php echo esc_attr($video_title); ?>">
    <h2 class="video-title"><?php echo $video_title; ?></h2>
    <!-- Add your other slide content here (videos, thumbnails, etc.) -->
  </div>
  <?php endwhile; ?>
</div>
<?php endif; ?>

Note: Make sure the have_rows() call matches the ACF repeater field you want to loop through—your original code had a mismatch between videofeed and videofeed2.

Step 2: Add JavaScript to Fetch Prev/Next Titles #

We'll use Slick's afterChange event to detect slide switches, then target the current slide's adjacent active slides to pull their titles. This works because your 3 active slides are siblings, with the middle one marked as .slick-current:

jQuery(document).ready(function($) {
  // Initialize Slick Slider (adjust settings to match your current config)
  $('.slider-popular').slick({
    slidesToShow: 3,
    centerMode: true, // This is likely the setting showing 3 centered slides
    infinite: true, // Keep this if you want looping behavior
    // Add your other Slick options here (speed, arrows, dots, etc.)
  });

  // Function to update prev/next titles
  function updateSlideNav() {
    var $currentSlide = $('.slick-slide.slick-current');
    var $prevSlide = $currentSlide.prev('.slick-active');
    var $nextSlide = $currentSlide.next('.slick-active');

    // Fetch titles from data attributes
    var prevTitle = $prevSlide.data('slide-title') || 'No previous slide';
    var nextTitle = $nextSlide.data('slide-title') || 'No next slide';

    // Example: Output titles to elements on your page
    // Replace these selectors with your actual element IDs/classes
    $('#prev-slide-label').text(prevTitle);
    $('#next-slide-label').text(nextTitle);

    // Uncomment to test in console
    // console.log('Previous Slide Title:', prevTitle);
    // console.log('Next Slide Title:', nextTitle);
  }

  // Run on slide change
  $('.slider-popular').on('afterChange', updateSlideNav);

  // Run once on page load to set initial titles
  updateSlideNav();
});

Key Notes to Keep in Mind #

• Use afterChange instead of beforeChange: This ensures the .slick-current class has been applied to the correct slide before we fetch data.
• Data attributes > DOM text: Storing titles in data-slide-title is more reliable than grabbing text from the h2—it avoids issues if the title is hidden or contains nested HTML.
• Handle infinite looping: If you have infinite: true enabled, Slick automatically wraps slides, and the prev()/next() methods will still target the correct adjacent active slide.
• Expand for more data: If you need links or other post details, just add more data-* attributes to the slide container (e.g., data-slide-url="<?php echo esc_attr(get_sub_field('video_link')); ?>").

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