Cacher is the code snippet organizer for pro developers

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
	<ol class="carousel-indicators">
		<!-- First Item the page starts as active -  DON'T TOUCH! -->
		<li data-target="#carousel" data-slide-to="0" class="active"></li>
		<!--########  ADD ITEMS HERE (for nav - dots) ##### ###### -->
		<li data-target="#carousel" data-slide-to="1"></li>
		<li data-target="#carousel" data-slide-to="2"></li>
		<li data-target="#carousel" data-slide-to="3"></li>
	</ol>
	
	<div class="carousel-inner"><!-- ###### ACTUAL DIVS -- ADD DIVS HERE ###### -->
		<div class="active item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774344/test.jpg"></div><!-- First div active -->
		<div class="item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774344/test2.jpg"></div>
		<div class="item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774344/test3.jpg"></div>
		<div class="item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1774344/test4.jpg"></div>
	</div><!-- ####### END DIVS ########################### -->
	
	<span class="carousel-control left" href="#carousel" data-slide="prev"><i class="fa fa-caret-left"> </i></span>
	<span class="carousel-control right" href="#carousel" data-slide="next"><i class="fa fa-caret-right"> </i></span>
</div>

.carousel-fade .carousel-inner .item {
 	transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	left: 0;
	transform: translate3d(0,0,0);
}
.carousel-fade .carousel-control {
	z-index: 2;
	font-size: 125px;
	padding-top: 8%;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
	width:100%;
	min-width:100%;
	margin:auto;
}
.item:nth-child(1) {
height: 100%;
}
.item:nth-child(2) {
height: 100%;
}
.item:nth-child(3) {
height: 100%;
}
.item:nth-child(4) {
height: 100%;
}




@media (max-width:750px){
.carousel-fade .carousel-control { padding-top: 0% !important;margin-top:-28px !important; }
}

@media (max-width:500px){
.carousel-fade .carousel-control { padding-top: 0% !important;margin-top:-42px !important; }
}

$('.carousel').carousel();