Bootstrap Индикаторы карусели в репитере - PullRequest
Новая
       143

Bootstrap Индикаторы карусели в репитере

0 голосов
/ 09 мая 2020

Просто интересно, может ли кто-нибудь помочь, пожалуйста. Я добавил карусель Bootstrap на свой сайт WordPress и использую Advanced Custom Field Repeaters. Как лучше всего заставить мои индикаторы работать?

Вот мой код ниже. 

<div class="slider">
<div class="row">
    <div id="slider-carousel-controls" class="carousel slide" data-ride="carousel">
        <div class="row justify-content-md-center no-gutters align-items-center">
            <div class="carousel-inner">
                <?php if( have_rows('slider') ): $i = 1; ?>
                    <?php while ( have_rows('slider') ) : the_row(); ?>
                        <div class="carousel-item <?php if($i == 1) echo 'active';?>">
                            <div class="image" style="background-image: url(<?php the_sub_field('image'); ?>); background-position: <?php the_sub_field('background_position'); ?>;">
                                <div class="col-lg-6 col-md-8 col-sm-12 col-12">
                                    <div class="background-color-<?php the_sub_field('background_colour'); ?> text-area">
                                        <div class="padding">
                                            <p class="title"><?php the_sub_field('title'); ?></p>
                                            <p class="text"><?php the_sub_field('text'); ?></p>

                                            <ol class="carousel-indicators">
                                                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                            </ol>
                                        </div><!--End Padding-->
                                    </div><!--End Background Colour-->
                                </div><!--End Columns-->
                            </div><!--End Image-->
                        </div><!--End Carousel Item--> 
                    <?php $i++; endwhile; ?>
                <?php else : endif; ?>
            </div><!--End Carousel Inner-->
        </div><!--End Row-->
    </div><!--End Carousel-->
</div><!--End Row-->

Спасибо !!

...