Bootstrap Carousel Fix

by wamosjk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image: url('http://sm-trust.com/imagesartikel/v0KO6zeQfA2016-01-29n.jpg')">
<a href="first.html"></a>
</div>
<div class="item" style="background-image: url('http://sm-trust.com/imagesartikel/8fXdR35LuO2016-01-29n.jpg')">
<a href="second.html"></a>
</div>
</div>
</div> 
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section>

CSS

/*just for example*/
#main-slider .item{
  padding-bottom: 50%;
}
/* Use For Your Site*/
#main-slider .item a {
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  z-index: -1;
}

JavaScript

//#main-slider
	$(function(){
		$('#main-slider .carousel').carousel({
			interval: 8000
		});
	});