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

Posted by Joseph Hill
Joseph Hill
4,098 Points

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,888 Points
Tim Knight
Tim Knight
28,888 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.

Joseph Hill
Joseph Hill
4,098 Points

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.