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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
ACF wouldn’t be so widely used in WordPress if it didn’t have some pretty amazing capabilities. In this article, we look at a few of the features we’ll discuss during “7 things you didn’t know you could do with ACF” at #WPEDecode later this month. https://t.co/5lnsTxp81j pic.twitter.com/Yf0ThPG1QG
— Advanced Custom Fields (@wp_acf) March 16, 2023
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.