Advanced custom fields + repeater + slider

Question

I combined a slider with the repeater fields. under the repeater I have 2 subfields. one called “image” and the other “title”

this slider has a class called “selected-item” that dynamically appear when an image is selected. (when this class is on an image the image change it’s size).

How can I define that when the class “selected-item” is on some image also the “title” form the same row of the image will appear?

this is the code the displays the images:

    <?php

    // check if the repeater field has rows of data
    $i = 1; 
  if( have_rows('carousel_images') ):
// loop through the rows use_cases_fields data
while ( have_rows('carousel_images') ) : the_row();
    $title=get_sub_field('image_carousel_discription');
    $image = get_sub_field('image_carousel1');

    if( !empty($image) ):
        // thumbnail
        $thumb = $image;
    ?>


            <li id="image11" data-row="<?php echo $i; ?>" > <a 
  href="#home"><img  src="<?php echo $thumb ?>"/></a> </li>

      <h3 id="h3-data" data-row="<?php echo $i; ?>"><?php echo $title ?>
     </h3>

         <?php $i++; ?>



    <?php endif; ?>

    <?php
endwhile;
endif;
  ?>

JS- the "carousel on" adding the class "selected-item" to image.

 carousel.on('itemSelected.sc', function (evt) {
           var image1=    
  document.getElementById("image11").getAttribute("data-row");   
             var hdata =       document.getElementById("h3-
     data").getAttribute("data-row");   
   var hdata2=    document.getElementById("h3-data").innerText;           
    if(image1==hdata){
      document.getElementById("change_h2").innerHTML =hdata2;     
  }

Tautvydas Banys Tautvydas Banys · Accepted Answer · 2017-12-05T12:44:57

You can add data atribute to image and title (f.e. data-row="< echo $i; >"). Define variable $i = 1; before repeater and at the end of each itereation increment $i value by one. Then, when selected image has "selected-item" class check which title has the same data-row atributte.

<?php

// check if the repeater field has rows of data
$i = 1;
if( have_rows('carousel_images') ):
    // loop through the rows use_cases_fields data
    while ( have_rows('carousel_images') ) : the_row();
        $title=get_sub_field('image_carousel_discription');
        $image = get_sub_field('image_carousel1');

        if( !empty($image) ):
            // thumbnail
            $thumb = $image;
        ?>

             <h1 data-row="<?php echo $i; ?>"><?php echo $title ?></h1>
             <li> <a href="#home"><img  data-row="<?php echo $i; ?>" src="<?php echo $thumb ?>"/></a> </li>

             <?php $i++; ?>
        <?php endif; ?>

        <?php
    endwhile;
endif;
?>

Advanced custom fields + repeater + slider

1 Answers