ACF get next sub_field data to current row

Question

I'm using slick slider with ACF fields (Wordpress). I am trying to get the next and previous post title to the current slide (.slick-current).

I have three active slides with the class .slick-active, the middle one having also the class .slick-current(in addition to .slick-active)

<?php if (have_rows('videofeed','option')): ?>
<div class="slider-popular">
            <?php while (have_rows('videofeed2','option')) : the_row(); ?>
                <div class="slider-go-wrap">
                      <h2 class="video-title"> <?php the_sub_field('video_title'); ?> </h2><!-- the video title -->

                    <div class="video-controls">
                                <div class="prev-title-popular">
                                    <span class="lightspan controltitles prev-videotitle">PREVIOUS TITLE HERE</span> <!-- previous  ACF row sub_field "video_title" here -->
                                </div>

                                <div class="next-title-popular">
                                    <span class="lightspan controltitles next-videotitle">NEXT TITLE HERE</span><!-- next ACF row sub_field "video_title" here -->
                                </div>
                    </div>
                </div>
            <?php endwhile;?>
</div>     
<?php endif; ?>

Not being a very server side person, how would I integrate the following php loop into my ACF field repeater with the next and previous field data in the current slide? Is there an simpler way to do this than the php loop?

$rows = get_field('videofeed');
if($rows)
{

    foreach($rows as $index => $row)
    {
        // from there, you can get prev / next data using loop index ($rows[$index-1] / $rows[$index+1]
    }

}

Any advice from here would be great.

I reached this point: $('.slider-go-wrap').each(function() { currentSlide = $('.slick-current'); nextSlide = currentSlide.next(); prevSlide = currentSlide.prev(); nextSlideData = nextSlide.find('.next-videotitle').html(); prevSlideData = prevSlide.find('.prev-videotitle').html(); }); but it doesn't seem to be working as planned. Any hints? — user3615851
Here's a fiddle, problem is that it only works for the current but should work for all slides: jsfiddle.net/px2bvdbt/12 — user3615851

user3615851 user3615851 · Accepted Answer · 2018-04-18T10:43:07

Issue solved with the following jQuery code, works for each slide:

$('.slider-go-wrap').each(function() {
  currentSlide = $(this);
  nextSlide = currentSlide.next();
  prevSlide = currentSlide.prev();
  nextSlideData = nextSlide.find('.video-title').html();
  prevSlideData = prevSlide.find('.video-title').html();

  currentSlide.find('.next-videotitle').html(nextSlideData);
  currentSlide.find('.prev-videotitle').html(prevSlideData);

});

ACF get next sub_field data to current row

1 Answers