Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress

Can't figure out why Bootstrap carousel CSS isn't working.

Been practicing with turning a static bootstrap theme into a dynamic WordPress template. Got everything to work correctly with my dynamic php statements except the carousel. It works but the CSS isn't pulling over correctly. You can view the site at http://52.201.34.48/wordpress to see what I mean. Carousel should look like the example at http://www.w3schools.com/bootstrap/trybs_theme_company_full.htm You can view full files for this project at https://github.com/josephhill1/WPbootstrap.git Would love any feedback as well as help with the carousel if you have the time. Carousel specific code is as follows:

<!-- Carousel Section -->               
    <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">

        <?php if( dynamic_sidebar( 'front-five' ) ); ?>


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

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

            <li data-target="#myCarousel" 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" role="listbox">

            <?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; ?>">
            <div <?php the_permalink(); ?>><?php echo the_content(); ?></div>

        </div>

            <?php endwhile; endif; ?>


    <!-- Controls -->
        <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>

        </div>
    </div>

1 Answer

Tim Knight
Tim Knight
28,863 Points

Hi Joseph,

Sorry for the late response here. I looked at your example and from what I can tell you've been able to work this issue out. If not, reply back with your current status of it and hopefully we'll be able to get you some further answers.

Sadly, I have still have not found a solution to this problem. It seems like the code is sound but the CSS animation still seems to be broken. If you look at the above sites you can see how on my site the inactive item indicators are not showing up as the orange bordered, hollow circles that they should. Only the active item shows up with the solid orange circle indicator. Also the control arrows have that dark grey box in the background and should not. Any help is appreciated. I have changed things time and again and keep getting the same output.