0

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>

2 Answers 2

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();
0
<?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 -->
1
  • Thank you for the answer, but would you please explain how this solves the op's problem in your answer? Dec 9, 2016 at 6:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.