Bootstrap Slider Not Displaying Images from ACF Repeater Field

Other Questions Wordpress
1

I’m having trouble getting my image slider to work properly with Advanced Custom Fields. I set up a repeater field called ‘gallery_photos’ with an ‘photo’ subfield inside it.

Working HTML version:

<section id="imageSlider" class="carousel slide">
    <ul class="carousel-indicators">
        <li data-target="#imageSlider" data-slide-to="0" class="active"></li>
        <li data-target="#imageSlider" data-slide-to="1"></li>
        <li data-target="#imageSlider" data-slide-to="2"></li>
    </ul>
    <div class="carousel-inner">
        <div class="item active">
            <div class="bg-cover" style="background-image:url('http://example.com/image1.jpg');"></div>
        </div>
        <div class="item">
            <div class="bg-cover" style="background-image:url('http://example.com/image2.jpg');"></div>
        </div>
    </div>
    <a class="prev-btn" href="#imageSlider" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="next-btn" href="#imageSlider" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</section>

PHP integration attempt:

<?php if(have_rows('gallery_photos')): ?>
<section id="imageSlider" class="carousel slide">
    <div class="carousel-inner">
    <?php $counter = 0; while(have_rows('gallery_photos')): the_row(); ?>
    <?php $counter++; $photo_url = get_sub_field('photo'); ?>
        <div class="<?php echo ($counter==1) ? 'active ' : ''; ?>item">
            <div class="bg-cover" style="background-image: url(<?php echo $photo_url; ?>);"></div>
        </div>
    <?php endwhile; ?>
    </div>
</section>
<?php endif; ?>

The carousel shows up with navigation dots but no actual images display. The HTML source looks correct when I inspect it. What could be causing this blank slider issue?

2

Check your browser’s network tab to see if the image URLs are loading. I’ve had this exact issue where the carousel structure looked fine but images wouldn’t load because of bad paths. Also check that your ACF repeater actually has data - throw a var_dump($photo_url); in your loop to see what’s coming out. Bootstrap version mismatches got me too - older versions use ‘item’ class, newer ones use ‘carousel-item’. Double-check your CSS classes match your Bootstrap version. If you’re still seeing blank slides, add a min-height to carousel-inner as a quick test - sometimes the container just collapses when images don’t load.

3

Had the same problem recently - two things were messing me up. First, check your ACF field settings. Make sure the photo field returns ‘URL’ instead of ‘Image Array’ or ‘Image ID’. If it’s returning an array, you’ll need to access it differently like mentioned above. Second, I was missing quotes around the URL in the background-image property. Your PHP should be style="background-image: url('<?php echo $photo_url; ?>');" with quotes around the URL. Also check if your bg-cover CSS class has proper dimensions set - without height, carousel items collapse to zero even with valid background images.

4

maybe ur ACF isn’t returning the url properly? try using get_sub_field('photo')['url'] if it’s an array. also, don’t forget to set a height on ur bg-cover class, or else the images might not show up even if they’re loaded.