Bootstrap Carousel with ACF

• Shell

• September 1, 2016 at 7:47 pm

Hi.

I’ve created a testimonial slider using the Bootstrap Carousel alongside ACF and a custom post type (called testimonials).

It mostly works great, displaying the ACF and looping through them. However, I can’t get the indicators to be dynamically added based on the number of testimonials.

I’ve tried numerous different ways – here’s the closest I’ve come – the slider works perfectly but in this example the indicators are hard coded – I wonder if someone would give me some guidance. Here’s my code:

<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
            <ol class="carousel-indicators">
    		<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
    		<li data-target="#carousel-example-2" data-slide-to="1"></li>
    		<li data-target="#carousel-example-2" data-slide-to="2"></li>
                            
  	</ol>
		<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
                    <?php 
					
                			$args = array (
                    		'post_type' => 'testimonials',
						'posts_per_page' => 1
							
                			);
            			$the_query = new WP_QUERY ( $args );
            ?>
            
        <?php
          $the_query = new WP_Query(array(
           'post_type' =>'testimonials',
           'posts_per_page' => 1
         ));
         while ( $the_query->have_posts() ) :
         $the_query->the_post();
         ?>
	<div class="carousel-item active">
                       

       <blockquote>
	<p><?php echo the_field ('testimonial_content'); ?></p>
          </blockquote>
	<cite><?php echo the_field ('testimonial_author'); ?></cite>
	</div>
	<?php endwhile; wp_reset_postdata(); ?>
        <?php
         $the_query = new WP_Query(array(
          'post_type' =>'testimonials',
          'offset' => 1
         ));
         while ( $the_query->have_posts() ) :
         $the_query->the_post();
         ?>
	<div class="carousel-item">
           <blockquote>
	<p><?php echo the_field ('testimonial_content'); ?></p>
           </blockquote>
	<cite><?php echo the_field ('testimonial_author'); ?></cite>
	</div>
                        <?php endwhile; wp_reset_postdata(); ?>
        </div><!-- /carousel-inner -->
	</div><!--/carousel-example -->	

Thanks

• John Huebner

• September 2, 2016 at 2:13 am

This is more of a general coding question than an ACF specific question. Here are some of the problems that I see though.

The first thing is that you’re not doing a query before the indicators to know how many items you have. Maybe you had one and removed it to hard code them.

The second thing that I’ll tell you is that you should not be doing multiple queries to do the work, this will significantly slow down the page load.

I’m not extremely familiar with bootstrap carousels but the HTML code does not look completely correct. When I look at an example I found here http://www.w3schools.com/bootstrap/bootstrap_carousel.asp. I couldn’t find and example that looked like your code so you might want to take a look that the example again and make sure you have that right. Using the example that I gave above it should look something like this

<?php 
  
  $args = array (
    'post_type' => 'testimonials',
    'posts_per_page' => 1
  );
  $the_query = new WP_Query($args);
  if ($the_query->have_posts()) {
    ?>
      <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <?php 
            $count = count($the_query->posts);
            for ($i=0; $i<$count; $i++) {
              ?>
                <li id="#carousel-example-2" data-slide-to="<?php echo $i; ?>"<?php
                    if ($i == 0) {
                      ?> class="active"<?php 
                    }
                  ?>></li>
              <?php 
            }
          ?>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="lisbox">
          <?php 
            $count = 0;
            while ($the_query->have_posts()) {
              $the_query->the_post();
              ?>
                <div class="carousel-item<?php 
                    if ($count == 0) {
                      echo ' active';
                    }
                  ?>">
                  <?php 
                    // code for displaying the content of the slide here
                  ?>
                </div>
              <?php 
              $count++;
            }
          ?>
        </div><!-- end .carousel-inner -->
      </div><!-- end #carousel-example-2 -->
    <?php 
    wp_reset_postdata();
  } // end if have posts
  
?>