A recent design called for bxSlider, but also for the ‘next’ and ‘prev’ links to include the titles of the next and prev slides. How would we achieve this?

I use Advanced Custom Fields PRO to populate an array of all the slide titles:

<script>
 
var approachslides = [];
 
<?php
if( have_rows('slides') ):
	$counter = 0;
    while ( have_rows('slides') ) : the_row();
?>
 
	approachslides[<?php echo $counter; ?>]  = "<?php the_sub_field('headline'); ?>";
 
<?php
	$counter++;
    endwhile;
endif;
?>
 
</script>

Then, within the document ready function, I add this Javascript. The “filllinktext” function swaps out the prev and next links with the previous and next slides’ titles, and that function is called every time the next and prev links are called:

var slider = $('#approachslider').bxSlider();
 
filllinktext();
 
function filllinktext() {
    var nextslide = slider.getCurrentSlide() + 1;
    var prevslide = slider.getCurrentSlide() - 1;
    if (nextslide > slider.getSlideCount()) { nextslide = 0; }
    if (prevslide < 0) { prevslide = slider.getSlideCount() - 1; }
    $('.nextslide').text(approachslides[nextslide]);
    $('.prevslide').text(approachslides[prevslide]);
}
 
$('.nextslide').click(function() {
    slider.goToNextSlide();
    filllinktext();
});
 
$('.prevslide').click(function() {
    slider.goToPrevSlide();
    filllinktext();
});

Here’s the HTML/PHP that adds the next and prev links, along with the slider itself:

<div class="section-content">
	<a class="nextslide">Next Slide</a>
	<a class="prevslide">Prev Slide</a>
	<ul class="bxslider" id="approachslider">
		<?php
		if( have_rows('slides') ):
			$counter = 0;
		    while ( have_rows('slides') ) : the_row();
		?>
		<li style="background-image:url('<?php the_sub_field('background_photo'); ?>')">
			<div class="slide-content" style="background-color: rgba(<?php echo hex2rgb(get_sub_field('color_of_content_overlay'))[0]; ?>,<?php echo hex2rgb(get_sub_field('color_of_content_overlay'))[1]; ?>,<?php echo hex2rgb(get_sub_field('color_of_content_overlay'))[2]; ?>,.<?php the_sub_field('opacity_of_slide'); ?>)">
				<div class="vertically-center">
					<h2><?php the_sub_field('headline'); ?></h2>
					<p><?php the_sub_field('body_copy'); ?></p>
					<a class="button" href="<?php the_sub_field('button_url'); ?>"><?php the_sub_field('button_text'); ?></a>
				</div>
			</div>
		</li>
		<?php
			$counter++;
		    endwhile;
		endif;
		?>
	</ul>
</div>