Hello,
I have a slick slider created with a repeater loop.
I would like to display under the current slide the next slide’s title (which is a custom field – ‘hero-title’).
This is the current code I have which displays the slick slider and a title, sub-title and a bg image for each title:
<section class="hp-slider">
<div class="home-slider">
<?php if( have_rows('home-slider') ): ?>
<?php while( have_rows('home-slider') ): the_row(); ?>
<?php
$imageArray = get_sub_field('image');
$imageURL = $imageArray['url'];
?>
<div class="slide-item hero-slider" style="background-image: url(<?php echo $imageURL; ?>)" data-title="<?php the_sub_field('hero-title'); ?>">
<div class="slider-content">
<div class="content-wrapper">
<h2><?php the_sub_field('subtitle');?></h2>
<h1 class="herohead"> <a href="<?php the_sub_field('hero-url');?>"> <?php the_sub_field('hero-title'); ?></a></h1>
<div class="hero-content"><?php the_sub_field('hero-content');?> </div>
</div>
</div>
</div>
<?php $i++; endwhile; ?>
<?php endif; ?>
</div> <!-- .index-slider -->
<div class="slider-nav">
<div class="title-cont"></div>
<button class="prev slick-arrow"> <i class="icon-arrow-left"></i> </button>
<button class="next slick-arrow"> <i class="icon-arrow-right"></i> </button>
</div>
</section>
How would I fetch the next slide’s title and display it inside the div with the class “title-cont”?
Thanks!
DAn
because this div is located outside of the have_rows() loop you’d probably need to do this using JavaScript and because it’s only one it would need to be continuously updated as the slides changed so you’d need to hook into this action if that’s even possible.
Thanks John, however, if I added a variable within the loop that would take the next slide’s title and save it and then disaplay it outside the loop, wouldn’t that work?
Question is – how do I get the next slide’s title.
Thanks
Dan
there isn’t a direct way to get the next item inside of a repeater have_rows() loop, but it can be done inderectly, but this will only work for simple fields.
while (have_rows('home-slider')) {
the_row();
// maybe get a text field from the next row
$index = get_row_index();
$next_title = get_post_meta($post->ID, 'home-slider_'.$index.'hero-title', true);
}
If I needed a way to look ahead into repeaters, or backwards for that matter I would skip the have_rows() loop and just get the repeater as an array so that I can look at whatever I need to.
// returns an array, each element is a row of the repeater
$slides = get_field('home-slider');
if (!empty($slides)) {
foreach ($slides as $index => $slide) {
$title = $slider['hero-title'];
$next_title = '';
if (isset(slides[$index+1])) }
$next_title = $slides[$index+1]['hero-title'];
}
}
}
Thanks John, I’ll shift to the foreach loop and try to solve based on your suggestion.
Don’t know why, but for me the ‘hav_rows’ loop has always been easier to implement.
Dan
It is easier to implement as long as you can get everything you want from the current row, but no easy way to look ahead or back.
