Home › Forums › Add-ons › Repeater Field › Bootstrap Carousel Repeater
Hi everyone! I’m trying to get this carousel to work with no success.
I don’t know what am I doing wrong, so far I have everything showing
but I just can’t get it to slide.
Any help be much appreciated,
This is my code,
<?php if(have_rows('bootstrap_carousel')): ?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$i =0;
while(have_rows('bootstrap_carousel')): the_row();
?>
<li data-target="#myCarousel" data-slide-to="<?php echo $i;?>" class="<?php if ($i===0): echo('active'); endif; ?>"></li>
<?php $i++; endwhile; ?>
</ol><!--end indicators-->
<!-- Slides -->
<div class="carousel-inner">
<?php
$i =0;
while(have_rows('bootstrap_carousel')): the_row();
//vars
$carousel_image = get_sub_field('carousel_image');
$carousel_headline = get_sub_field('carousel_headline');
$carousel_text = get_sub_field('carousel_text');
$carousel_button_text = get_sub_field('carousel_button_text');
$carousel_button_link = get_sub_field('carousel_button_link');
?>
<div class="container-fluid px-0">
<div class="item carousel-item <?php if ($i===0): echo('active'); endif; ?>">
<img class="img-fluid" src="<?php echo ($carousel_image); ?>" alt="<?php echo($carousel_image);?>">
<div class="carousel-caption text-center">
<span class="middle"><?php echo ($carousel_headline); ?></span><br/>
<span class="carousel-text"><?php echo ($carousel_text); ?></span>
<?php
if( $carousel_button_link ): ?>
<p><a class="btn btn-lg btn-primary" href="<?php echo $carousel_button_link; ?>"><?php echo $carousel_button_text; ?></a></p>
<?php endif; ?>
</div>
</div>
</div>
<?php $i++; endwhile; ?>
</div><!-- End of Slides -->
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php endif; ?>
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
Are you building WordPress sites with ACF and @BeaverBuilder, and wanted to use your ACF Blocks in both the block editor and Beaver Builder?
— Advanced Custom Fields (@wp_acf) May 10, 2023
The BB team recently added support for using ACF Blocks in Beaver Builder. Check it out 👇https://t.co/UalEIa5aQi
© 2023 Advanced Custom Fields.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.