Home › Forums › Add-ons › Repeater Field › Using ACF PRO with Repeater for Bootstrap Carousel
Using the ACF Plugin I created a field called ‘slideshow_images’ and within the repeater I had a field named ‘image’.
My original bootstrap html code is as follows:
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</header>
I included the PHP into the code above as follows:
<?php if(get_field('slideshow_images')): ?>
<header id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $z = 0; while(the_repeater_field('slideshow_images')): ?>
<?php $z = $z + 1; $image = wp_get_attachment_image_src(get_sub_field('image'), 'full'); ?>
<div class="<?php echo ($z==1) ? 'active ' : ''; ?>item">
<div class="fill" style="background-image: url(<?php the_sub_field('image');?>);"></div>
</div>
<?php endwhile; ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</header>
<?php endif; ?>
However, when I add my images and preview the site. Nothing shows up. There are no errors at all. When I view source, everything seems to be just fine but all I get is a Blank carousel(you can still see the indicators). What seems to be the issue?
What is the return type for the image field?
If it’s array, there is an error but it’s printed into the inline styles so you can’t actually see it on the screen! So it’s kind of sneaky.
To solve that you need to do <div class="fill" style="width: 100px; height: 100px; background-image: url(<?php echo get_sub_field('image')["sizes"]["full"] ?>);"></div>
to get the image url from the array.
@hbroccoli I believe I set the return type of the image field as URL, not Array. When I view source when previewing the site, the url field in the html has the appropriate url with the image I just uploaded.
@hbroccoli yes I added it, as shown below.
<div class="fill" style="width: 1900px; height: 1080px; background-image: url(<?php the_sub_field('image');?>);"></div>
But now my carousel doesnt move left or right. its stuck on the one image. When I view source my code shows up as seen below:
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="width: 1900px; height: 1080px; background-image: url(http://vagrantpress.dev/wp-content/uploads/2016/08/Wallpapersxl-Waterfall-Fanatsy-Landscape-From-Fantasy-738628-1900x1080.jpg);"></div>
<div class="item ">
<div class="fill" style="width: 1900px; height: 1080px; background-image: url(http://vagrantpress.dev/wp-content/uploads/2016/08/Wallpapersxl-Waterfall-Fanatsy-Landscape-From-Fantasy-738628-1900x1080.jpg);"></div>
<div class="item ">
<div class="fill" style="width: 1900px; height: 1080px; background-image: url(http://vagrantpress.dev/wp-content/uploads/2016/08/Wallpapersxl-Waterfall-Fanatsy-Landscape-From-Fantasy-738628-1900x1080.jpg);"></div>
</div>
Which seems exactly like my html above.
Hi @movingsale
I don’t think there’s a function called the_repeater_field()
. Could you please check this page to learn how to use a repeater field: https://www.advancedcustomfields.com/resources/repeater/?
Thanks 🙂
The topic ‘Using ACF PRO with Repeater for Bootstrap Carousel’ is closed to new replies.
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!
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 Privacy Policy. If you continue to use this site, you consent to our use of cookies.