[bootstrap] Getting a simple working carousel without a plugin

Hello all,

I’m trying to create a dynamic carousel for a Bootstrap theme without the use of a plugin so I can customize it more.

Based on the following code it should load all the posts’ attached images and put them in the slider:

The only thing I have trouble with is that the active slide should be set as ‘active’ and that the indicators should work. The static version is found here: http://getbootstrap.com/examples/carousel/

` <div id=”myCarousel” class=”carousel slide” data-ride=”carousel”>
<!– Indicators –>
<ol class=”carousel-indicators”>
<li data-target=”#myCarousel” data-slide-to=”0″ class=”active”></li>
<li data-target=”#myCarousel” data-slide-to=”1″></li>
<li data-target=”#myCarousel” data-slide-to=”2″></li>
</ol>
<div class=”carousel-inner”>

<?php
$argsThumb = array(
‘order’ => ‘ASC’,
‘post_type’ => ‘attachment’,
‘post_parent’ => $post->ID,
‘post_mime_type’ => ‘image’,
‘post_status’ => null
);
$attachments = get_posts($argsThumb);
if ($attachments) {
foreach ($attachments as $attachment) {

//echo apply_filters(‘the_title’, $attachment->post_title);
echo ‘<div class=”item active”>’;
echo ‘<div class=”container”>’;
echo ‘<img src=”‘.wp_get_attachment_url($attachment->ID, ‘thumbnail’, false, false).'” style=”width: 100%; height: 400px;” />’;
echo ‘</div>’;
echo ‘</div>’;
}
}
?>

</div> <!– carousel – inner –>
<a class=”left carousel-control” href=”#myCarousel” data-slide=”prev”><span class=”glyphicon glyphicon-chevron-left”></span></a>
<a class=”right carousel-control” href=”#myCarousel” data-slide=”next”><span class=”glyphicon glyphicon-chevron-right”></span></a>
</div><!– /.carousel –>`

Thanks 🙂