How to make ID for Flexibe ? "slider"

• ShepXBFR

• February 21, 2019 at 1:34 am

Hello, I made this slider with bootstrap it works perfectly however I integrated it in a repeater field, I wish that the id of slider can change according to the number of carousel created.

For example, carousel 1 will be ID 1
the previous / next buttons will be attached to ID 1

if a second carousel is created it will carry id 2 and so on with the previous & next attachment in ID2

My code :

<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel" data-interval="<?php the_field('vitesse_de_defilement','options'); ?>">

    
    <div class="carousel-inner">

        <?php 
        $z = 0;
        ?>
            <?php if( have_rows('repeat_moduleslider') ): ?>
        <?php  while ( have_rows('repeat_moduleslider') ) :  the_row(); ?><!-- repeater loop -->

        <?php 
        $posts = get_sub_field('slider_devimg');
        if( $posts ): ?>
        <?php foreach( $posts as $post): ?>
        <?php setup_postdata($post);?>

        <div class="carousel-item <?php if ($z==0) { echo 'active';} ?> haut">             
            <div style="position: relative;background-image:linear-gradient(<?php the_field('couleurs_du_gradient','options'); ?>),url(<?php the_post_thumbnail_url( 'full' ); ?>);background-repeat: no-repeat;
                        background-position: center;
                        background-size: cover;
                        padding: 200px 0 200px;min-height:600px;max-height:600px;">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 text-right">
                            <div class="cryo-header-content">
                                <h1 class="title-style1 upper tshadow"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                                <div class="vgtext mb-3">
                                    <h2 class="incryo-h2 mb-3"><?php the_excerpt('10'); ?></h2>
                                    <h3 class="incryo-h3"><a href="<?php the_permalink(); ?>"><button type="button" class="btn btn-style1"><i class="fas fa-link"></i> <?php esc_html_e( 'Read More', 'cryogames' ); ?></button></a></h3>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 

        <?php endforeach; ?>
        <?php wp_reset_postdata(); ?>
        <?php endif; ?>

        <?php $z++; endwhile;else : ?><!-- repeater loop -->
        <?php endif; ?>
        
        <?php 
        $i=0;
        while( have_rows('repeat_moduleslider') ): the_row();
        if ($i == 0) {
            echo '<a class="carousel-control-prev" href="#carouselExampleControls2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>';
        } else {
            echo '<a class="carousel-control-next" href="#carouselExampleControls2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>';
        }
        $i++;
        endwhile; ?>
        

    </div>
  
</div>

Thanks for help !