Carousel

carousel.html

<div id="carousel" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
  	<ol class="carousel-indicators">
	 </ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
		<div class="item active">
	    		<img src="http://placehold.it/1900x550" class="img-responsive" alt="">
			<div class="carousel-caption">
				<p>The team of Wendy’s Beauty Salon: Denise Martens, Sharon Jacobs.</p>
				<a href="/" class="btn btn-slider">Read more</a>
	    		</div>
		</div>
		<div class="item">
			<img src="http://placehold.it/1900x550" class="img-responsive" alt="">
			<div class="carousel-caption">
				<p>The team of Wendy’s Beauty Salon: Denise Martens, Sharon Jacobs.</p>
				<a href="/" class="btn btn-slider">Read more</a>
			</div>
		</div>
		<div class="item">
			<img src="http://placehold.it/1900x550" class="img-responsive" alt="">
			<div class="carousel-caption">
				<p>The team of Wendy’s Beauty Salon: Denise Martens, Sharon Jacobs.</p>
				<a href="/" class="btn btn-slider">Read more</a>
			</div>
		</div>
	</div>
	<!-- Controls -->
	<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

carousel.js

// Homepage-slider Automatisch genereren van slider indicators
	var slideqty = jQuery('#carousel .item').length;

	for (var i=0; i < slideqty; i++) {
    var insertText = '<li data-target="#carousel" data-slide-to="' + i + '"></li>';
    jQuery('#carousel ol').append(insertText);
  }

  // Homepage-slider eerste li krijgt class .active
  $("#carousel ol li:first").addClass("active");

carousel.sass

.slide
  font-size: 44px
  text-transform: uppercase
  line-height: 1.4

.carousel-caption
  font-size:44px
  right: 20%
  left: 20%
  padding-bottom: 135px

.carousel-control.left, .carousel-control.right
    background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0) 0,rgba(0,0,0,.0) 100%)
    background-image: -o-linear-gradient(left,rgba(0,0,0,.0) 0,rgba(0,0,0,.0) 100%)
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0)),to(rgba(0,0,0,.0)))
    background-image: linear-gradient(to right,rgba(0,0,0,.0) 0,rgba(0,0,0,.0) 100%)
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)