Problems with Bootstrap 3 Carousel Integration

Question

I'm building a theme for the first time, using Bootstrap 3 integrated with Wordpress to do so. I have a carousel partially working. Right now it shows the slides in reverse order, i.e. Slide 3, Slide 2, Slide 1. Then it breaks and goes to a blank screen.

This is the code I'm using. Any ideas why this is happening or what I could try to both make it go in the right order and make it loop infinitely?

<div class="container">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <?php $new_query = new WP_Query('post_type=slide&posts_per_page=3'); 
    $i = 1;
     while ( $new_query->have_posts()) : $new_query->the_post(); ?>

        <div class="item <?php if ($i == 1) echo 'active'; ?>" >

          <img src="<?php the_field('slide_image'); ?>" >

            <div class="carousel-caption">
              <h1><small><?php the_field('slide_caption'); ?></small></h1>
            </div><!--carousel-caption-->

        </div><!--item active -->

<?php
    $i++;
endwhile;
wp_reset_postdata();
?>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>


</div>

Answer 1

I solved it with a custom query

 $args = array(
'post_type' => 'slide',
'orderby' => 'date',
'order' => 'ASC'
 );
 $i=1;
 $slide_query = new WP_Query($args);
  while ( $slide_query->have_posts() ) : $slide_query->the_post();

Answer 2

<?php
/**
 * The template part for displaying the front page carousel
 *
 * @package WordPress
 * @subpackage Any_Page_First
 * @since Any Page First 1.0
 */
?>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

      <?php 
      // the query
      $sticky = get_option( 'sticky_posts' );
      $args = array(
    'post__not_in' => $sticky,
      );
      $the_query = new WP_Query( $args ); ?>

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

      <!-- Indicators -->
      <ol class="carousel-indicators">

      <?php
      // Start the loop.
      $i = 0; while ( $the_query->have_posts() ) : $the_query->the_post();
      if ( $i == 0 ) : ?>
        <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>" class="active"></li>
      <?php else : ?>
        <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>"></li>
      <?php endif; ?>

      <?php 
      // End the loop.
      $i++; endwhile;

      // Restore original Post Data
      wp_reset_postdata(); ?>

      </ol>
      <div class="carousel-inner" role="listbox">

      <?php 
      // the query
      $sticky = get_option( 'sticky_posts' );
      $args = array(
    'post__not_in' => $sticky,
      );
      $the_query = new WP_Query( $args ); ?>

      <?php
      // Start the loop.
      $i = 0; while ( $the_query->have_posts() ) : $the_query->the_post();
      if ( $i == 0 ) : ?>
        <div class="item active">
      <?php else : ?>
        <div class="item">
      <?php endif; ?>

      <?php
      // Include the carousel template content.
      get_template_part( 'template-parts/content', 'carousel' ); ?>

      </div>

      <?php
      // End the loop.
      $i++; endwhile;

      // Restore original Post Data
      wp_reset_postdata(); ?>

      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

      <?php endif; ?>

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