index.html

<div id="main-description" class="row">
	<div class="span5 columns">
		<div id="main-slider" class="carousel slide">
			<!-- Carousel items -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="http://placehold.it/470x360">
				</div>
				<div class="item">
					<img src="http://placehold.it/470x360">
				</div>
				<div class="item">
					<img src="http://placehold.it/470x360">
				</div>
				<div class="item">
					<img src="http://placehold.it/470x360">
				</div>
				<div class="item">
					<img src="http://placehold.it/470x360">
				</div>
				<div class="item">
					<img src="http://placehold.it/470x360">
				</div>
				<div class="item">
					<img src="http://placehold.it/470x360">
				</div>
				<div class="item">
					<img src="http://placehold.it/470x360">
				</div>
			</div>
			<!-- Carousel nav -->
			<a class="carousel-control left" href="#main-slider" data-slide="prev">&lsaquo;</a>
			<a class="carousel-control right" href="#main-slider" data-slide="next">&rsaquo;</a>
		</div>
	</div>

</div>

main.js

$(document).ready(function () {
	$('#main-slider').carousel({
		'interval': 3000,
	});
});

main.less

// main.less

@import "bootstrap";

#main-slider {
	.carousel-control {
		top: 70%;
		left: 5%;
		right: auto;

	}

	.carousel-control.right {
		left: auto;
		right: 5%;
	}

	.btn-group {
		padding: 10px 5px;
	}

	.item img {
		width: 100%;
	}
}