Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Boris Kamp
Boris Kamp
16,660 Points
Posted by Boris Kamp
Boris Kamp
16,660 Points

really weird situation with bootstrap carousel

hi!

The bootstrap carousel is driving me crazy at the moment, I've applied my existing wp theme to a new project, and changed the setting in the carousel php part in my front-page.php to match my custom post types and advanced custom fields. Here is my php code thats inside front-page.php:

<?php get_header(); ?>
  <p>front-page.php</p>
<!-- Carousel -->
  <?php

    $args = array(
      'post_type'     => 'fotoslider',
      'orderby' => 'rand'
    );
    $the_query = new WP_Query( $args );

  ?>

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

      <li data-target="#carousel-example-generic" data-slide-to="<?php echo $the_query->current_post; ?>" class="<?php if( $the_query->current_post == 0 ):?>active<?php endif; ?>"></li>

      <?php endwhile; endif; ?>
  </ol>

  <?php rewind_posts(); ?>

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

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

    <div class="item <?php if( $the_query->current_post == 0 ):?>active<?php endif; ?>">
      <a href="<?php the_permalink(); ?>"><img class="carousel-image" src="<?php the_field('slider_foto'); ?>" alt="<?php the_title(); ?>">
      <div class="carousel-caption"><h1 class="grid-h1"><?php the_title(); ?></h1></div></a>
    </div>

    <?php endwhile; endif; ?>

  </div>

  <!-- 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><!-- End Carousel -->

<?php get_footer(); ?>

It SHOULD work but it doesn't, in fact it gives me this error in Chrome console:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
bootstrap.min.js?ver=3.9.1:6

Now I have no idea what's wrong here since it works in my other wp installation (other project). When I copy the EXACT same carousel code to single-fotoslider.php, it works when I view one of those pages, but at the homepage it gives the error.

I hope you guys can help me out with this stupid situation....

Thanks!

1 Answer

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Found out the isssue, Wordpress setting > Reading, and set front page to display a static page, that solved my problem.... somehow the above carousel code can't co-op with a blog listing page.