Getting Twitter Bootstrap Carousel to work with WordPress using Custom Post type

Made a custom post type called ‘slides’
Adding custom fields for slide image, title and caption using ACF plugin.
Trying to set it up with the carousel for twitter bootstrap 2.3.2
Used two sets of WP_Query- one for ‘item-active’ and another ‘item’
There’s no sliding and the next row of items gets shifted to the left.
Here’s the code.

<div class="span8">
				<div id="slider" class="carousel slide hidden-phone">
					<div class="carousel-inner">
						<?php $new_query = new WP_Query('post_type=slide&posts_per_page=1');
						while($new_query->have_posts()) : $new_query->the_post();
						?>

						<div class="item active">
							<img src="<?php the_field("slide_image"); ?>" alt="<?php the_title(); ?>">
							<div class="carousel-caption  hidden-phone">
								<h4><?php the_title(); ?></h4>
								<p><?php the_field("slide_caption"); ?></p>
							</div>
							</div>

							<?php endwhile; wp_reset_postdata(); ?>

							<?php $new_query = new WP_Query(array(

								'post_type'=>'slide',
								'posts_per_page'=>'3',
								'offset'=> '1'
								));
						while($new_query->have_posts()) : $new_query->the_post();
						?>

							<div class="item">
							<img src="<?php the_field("slide_image"); ?>" alt="<?php the_title(); ?>">
							<div class="carousel-caption  hidden-phone">
								<h4><?php the_title(); ?></h4>
								<p><?php the_field("slide_caption"); ?></p>
							</div>
						</div>

						<?php endwhile; wp_reset_postdata(); ?>

						</div>
					</div>

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

Here’s the Output on ‘view source’ in Chrome

<div class="span8">
				<div id="slider" class="carousel slide hidden-phone">
					<div class="carousel-inner">

						<div class="item active">
							<img src="https://localhost/test/wp-content/uploads/2013/09/url.png" alt="Slide Three">
							<div class="carousel-caption  hidden-phone">
								<h4>Slide Three</h4>
								<p>This one is for good measure.</p>
							</div>
							</div>

							<div class="item">
							<img src="https://localhost/test/wp-content/uploads/2013/09/Card.jpg" alt="Slide Two">
							<div class="carousel-caption  hidden-phone">
								<h4>Slide Two</h4>
								<p>This is another caption. It's a very cool slide.</p>
							</div>
						</div>

							<div class="item">
							<img src="https://localhost/test/wp-content/uploads/2013/09/Banner.jpg" alt="Slide One">
							<div class="carousel-caption  hidden-phone">
								<h4>Slide One</h4>
								<p>Here is one slide one caption.</p>
							</div>
						</div>

						</div>
					</div>

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

What do you think is the problem?