Hiding carousel indicators if there's only one post

Question

I am working on a custom carousel (Wordpress + Bootstrap). The carousel is working without problems. However, I would like to hide Bootstrap carousel indicators and arrows if there is only one post.

I was able to hide the carousel arrows by using this code:

<?php if ($counter > 1) { ?>

      <a class="left carousel-control" href="#testimonials" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#testimonials" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

<?php } ?>

However, I am not able to access the $counter variable where the carousel indicators are located. I tried using a while inside a while but the page breaks.

Here's the code in question:

  <ol class="carousel-indicators">

    <?php $indicatorCount = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>

      <li data-target="#testimonials" data-slide-to="<?=$indicatorCount?>" class="<?php echo ($indicatorCount==0) ? "active" : "" ?>"></li>
      <?php echo $indicatorCount; ?>

    <?php ++$indicatorCount; endwhile; ?>

  </ol> <!-- /.carousel-indicators --> 

And here's my full code (just for reference)

  <?php

  $args = array(

    'post_type' => 'post', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC',

  );

  $loop = new WP_Query( $args );

  ?>

  <?php if( $loop->have_posts() ): ?>

      <div id="testimonials" class="carousel sp slide carousel-fade" data-ride="carousel" >

      <ol class="carousel-indicators">

        <?php $indicatorCount = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>

          <li data-target="#testimonials" data-slide-to="<?=$indicatorCount?>" class="<?php echo ($indicatorCount==0) ? "active" : "" ?>"></li>
          <?php echo $indicatorCount; ?>

        <?php ++$indicatorCount; endwhile; ?>

      </ol> <!-- /.carousel-indicators --> 

        <div class="carousel-inner">

        <?php $counter = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>

          <div class="item <?php echo ($counter==0) ? "active" : "" ?>">

            <div class="row">

              <div class="col-md-4">

                <img class="img-responsive" src="http://placehold.it/360x200" />

              </div>

              <div class="col-md-8">

                <h3><?php the_title(); ?></h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

              </div>

            </div> <!-- /.row --> 

          </div> <!-- /.item --> 

        <?php $counter++; endwhile; ?>        

          <?php if ($counter > 1) { ?>

            <a class="left carousel-control" href="#testimonials" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="right carousel-control" href="#testimonials" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

          <?php } ?>

        </div> <!-- /.carousel-inner --> 

      </div> <!-- #testimonials .carousel --> 

  <?php endif; ?>

Any ideas on how I could hide the carousel indicators block if there's only one post?

Thanks a lot for your input and help!

UPDATE: Here's the code with the provided answer!

  <?php

  $args = array(

    'post_type' => 'post', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC',

  );

  $loop = new WP_Query( $args );

  ?>

  <?php if( $loop->have_posts() ): ?>

      <div id="testimonials" class="carousel sp slide carousel-fade" data-ride="carousel" >

      <?php if($loop->post_count > 1) { ?>

      <ol class="carousel-indicators">

        <?php $indicatorCount = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>

          <li data-target="#testimonials" data-slide-to="<?=$indicatorCount?>" class="<?php echo ($indicatorCount==0) ? "active" : "" ?>"></li>

        <?php ++$indicatorCount; endwhile; ?>

      </ol> <!-- /.carousel-indicators --> 

      <?php } ?>

        <div class="carousel-inner">

        <?php $counter = 0; while ( $loop->have_posts() ) : $loop->the_post(); ?>

          <div class="item <?php echo ($counter==0) ? "active" : "" ?>">

            <div class="row">

              <div class="col-md-4">

                <img class="img-responsive" src="http://placehold.it/360x200" />

              </div>

              <div class="col-md-8">

                <h3><?php the_title(); ?></h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

              </div>

            </div> <!-- /.row --> 

          </div> <!-- /.item --> 

        <?php $counter++; endwhile; ?>        

          <?php if($loop->post_count > 1) { ?>

            <a class="left carousel-control" href="#testimonials" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
            <a class="right carousel-control" href="#testimonials" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

          <?php } ?>

        </div> <!-- /.carousel-inner --> 

      </div> <!-- #testimonials .carousel --> 

  <?php endif; ?>

Answer 1

You can use the condition

<?php
    if($loop->post_count > 1){
        /**
          * so show the carousel counter
         */

    }
?>

Answer 2

Here is a solution I also used in the past. This allowed me to use the slides in other places on the page as well as in tiled galleries or thumbnails and so on.

<?php 
$indicators = array();
$slides = array();

$counter = 0;
while ( $loop->have_posts() ) : $counter++;
    array_push($indicators, '<li data-target="#testimonials" data-slide-to="'.$counter.'" class="'.(($counter == 0) ? "active" : "").'"></li>');
    array_push($slides, $loop->the_post());
endwhile; 

//show the slide indicators
if(count($indicators) > 1) { ?>
    <ol class="carousel-indicators">
    <?php foreach($indicators as $indicator):
        echo $indicator;
    endforeach; ?>
    </ol>
<?php } 

//show the left and right controls
if(count($indicators) > 1) { ?>
    <a class="left carousel-control" href="#testimonials" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#testimonials" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
<?php } 

//show the slides
if(count($slides) > 0):
    foreach($slides as $slide):
        //the way I used to print the slides
    endforeach;
endif; ?>