0

*UPDATE - This wasn't showing because of a cache issue. The comment referencing changing the jQuery to :first-child instead of :first was indeed the only issue that needed to be addressed. *

I am creating a WordPress theme and the image slider fails to do three things:

1) When clicking an indicator it does not do anything.

2) The image slider does not slide automatically.

3) The first indicator is never on.

I know the content is present because if I add a Post with the Category slider the image will display along with the title and a new carousel indicator. I also checked the DOM and all of the data-slides are there but nothing is moving. Any help is appreciated.

HTML/PHP

<?php 
   $number = 0; 
   query_posts('category_name=slider'); 
   if(have_posts()):  
?>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <?php while(have_posts()): the_post(); ?>
      <li data-target="#carousel-example-generic" data-slide-to="<?php echo $number++; ?>"></li>
      <?php endwhile; ?>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">  

    <?php while(have_posts()): the_post(); ?>

    <div class="item">
      <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id ( $post->ID ), 'single-post-thumbnail' ); ?><a href=#"><img class="img-responsive" src="<?php echo $image[0]; ?>" />
      <div class="carousel-caption">
        <?php the_title();?>  
      </div>
    </div></a>
    <?php endwhile; ?>
  </div>
</div>

<?php endif; wp_reset_query(); ?>

jQuery

//Carousel Indicator
$(".carousel-indicators li:first-child").addClass("active");
$(".carousel-inner .item:first-child").addClass("active");
  • do you have 'wp_head()' and 'wp_footer()' in your theme at the corresponding locations? – Michael Aug 12 '17 at 22:15
  • <?php wp_head(); ?> is the last line in the <head> and <?php wp_footer(); ?> is in the footer.php – user5854648 Aug 13 '17 at 8:24
0

From where I see it you are looping the indicators as well as your carousel inner items. Basically, try looping the content only.

  • Hi, could you be more specific? Do you mean remove: <?php while(have_posts()): the_post(); ?> <li data-target="#carousel-example-generic" data-slide-to="<?php echo $number++; ?>"></li> <?php endwhile; ?> – user5854648 Aug 13 '17 at 7:23
0

Adding :first-child over :first solved the indicator issue but the above code is actually correct. I had to clear the cache and it worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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