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
<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;
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.