Using Repeater for Carousel with Multiple Fields

• beliy333

• November 15, 2013 at 4:25 pm

I know I can use the gallery add-on but I need to have custom fields that load with the images. Basically I’m trying to create an image carousel with three fields attached to each image: Title, Description, Instructions. I’m using the repeater along with the Nivo slider and I’m able to create the carousel and pull the additional fields but how do I show ONLY the active slide’s fields (description, instructions, title)?

Here is my code so far:

<?php 
			$rows = get_field('idea');
			if($rows)
			{
				echo '<ul>';
			 
				foreach($rows as $row)
				{
					echo '<li><img src="' . $row['image'] . '"> <h3>Description</h3>' . $row['description'] . $row['title'] . $row['instructions'] .'</li>';
				}
			 
				echo '</ul>';
			}
?>

Any help would be very appreciated!

• beliy333

• November 16, 2013 at 7:42 am

bump

• Elliot

• November 17, 2013 at 11:05 am

Hi @beliy333

Can you explain what you mean by:
– how do I show ONLY the active slide’s fields (description, instructions, title)?

What is the active’s fields?

Is this a JS thing, or a PHP thing?

THanks
E

• beliy333

• November 18, 2013 at 2:29 pm

Hi @elliot

Thanks for the response. What I mean is when I navigate through the different images in the carousel, I’d like to show 3 additional fields that are in the same repeater field as the image.

Please see this image as a reference. This is what I’m trying to accomplish:

So when the slide changes, I need the description, title, and instruction fields to change as well. So if slide 2 is active, then slide 2’s instruction, description and title fields are showing. When the carousel navigates to slide 3, then slide 3’s fields are showing.

I think this is a PHP thing.

Thanks for your time,
Yan

• Elliot

• November 19, 2013 at 9:04 am

Hi @beliy333

Thanks for clarifying.
What you need to do is render out ALL of the required PHP into the Carousel. Most Carousel JS plugins allow for not only an image, but for HTML as well.

You will need to research the Carousel documentation to find out how this is possible, but once understood, you can simply modify your code to also render out the other sub fields in the correct markup.

Does that help?

Thanks
E