[Resolved] Counter variable when using wpv-for-each

[Author]

Posts

[Cesar]

Tell us what you are trying to do?

I'm using Fields block to create a custom slider for multiples Images field
I use [wpv-for-each] to get every image and some js code to make the first one active

I need to have a carousel indicator and those need to link to the data atribute of the slide

<li data-target="#carousel" data-slide-to="0" class="active"></li>

What I'm missing is a way to have a count that will output a number from 0 to the total of Fileds in the post type.

I've try a custom shortcode using the toolset congig options but I can`t manage to make it work

Would really appreciate if you can help me generating the code that will output the value (0,1,2,n) each time the loop is traversed

Thanks

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">

  <div class="carousel-inner" role="listbox">
    [wpv-for-each field="wpcf-fotografia"]
    <div class="carousel-item">
[types field='fotografia' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='1786' height='1322' resize='crop' separator=', '][/types]
    </div>
    [/wpv-for-each]
  </div>
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
  </ol>

[Christian Cox]

Hi, it sounds like you need a way to output the carousel-indicators list items programmatically. I think you could use a custom shortcode to help create an automatic index value and output it in the data-slide-to attribute. First, please add this custom shortcode to your child theme's functions.php file, or a custom code snippet in Toolset > Settings > Custom Code:

add_shortcode('wpv-index', function () {

    static $i = 0;
    $n = $i++;
    
    return $n;
});

That will create a shortcode wpv-index, which we can use in the wpv-for-each loop to create these carousel-indicators list items.

Next, use wpv-for-each to iterate over the fotografia field instances and generate the indicator list items:

[wpv-for-each field='wpcf-fotografia']
<li data-target="#carousel" data-slide-to="[wpv-index]"></li>
[/wpv-for-each]

That should output a list of indicators for each fotografia field instance. Based on your description, it sounds like you are using JavaScript to append the "active" class to the first list item instance. That is probably the easiest way to handle assigning the "active" class here, since conditionals are not fully supported inside wpv-for-each.

Let me know if you have questions about this, or if I've misunderstood what you want to accomplish.

[Cesar]

This is exactly what I was looking for!
Thanks