Trouble With Bootstrap Carousel and a Theme I am building

I am building a WP theme with Twitter Bootstrap. I would like to use the carousel but I am having no luck getting the slide to change. I hope you guys can help me. I can not seem to find out why this is not working.

This is my sidebar_carousel.php

Read More
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li class="active" data-target="#myCarousel" data-slide-to="1"></li>
    <li class="" data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
    <?php
    $i = 1;
    $the_query = new WP_Query(array(
        'post_type' => 'ss_carousel',
        'posts_per_page' => 3
    ));
    while ($the_query->have_posts()) :
        $the_query->the_post();
        if ($i == 1) {
            ?>
            <div class="item active">
                <?php the_post_thumbnail('full'); ?>
                <div class="carousel-caption">
                    <h2><?php the_title(); ?></h2>

                    <p><?php the_excerpt(); ?></p>
                    <a class="btn btn-success big" href=""></a>
                </div>
            </div>
        <?php
        } else {
            ?>
            <div class="item">
                <?php the_post_thumbnail('full'); ?>
                <div class="carousel-caption">
                    <h2><?php the_title(); ?></h2>

                    <p><?php the_content(); ?></p>
                    <a class="btn btn-success btn-lg" href=""></a>
                </div>
            </div>
        <?php
        }
        $i++; endwhile;
    wp_reset_postdata();
    ?>
</div>
<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>

This is my functions.php

//Java for carousel
    if (!function_exists('ss_carousel_exists')) :
        function ss_carousel_exists()
        {
            ?>
            <script type="text/javascript">
                jQuery(document).jQuery(function ($) {
                    jQuery('#myCarousel').carousel({
                        interval: 7000
                    })
                });
            </script>
        <?php
        }

        add_action('wp_footer', 'ss_carousel_exists');
    endif;

Related posts

Leave a Reply

1 comment

  1. I have found the problem I was having with the help from Richer. I had a typo. If you want to use bootstrap carousel in a WordPress theme the code above works.