<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	<div id="wrap">

		<div id="testCarousel" class="carousel slide" data-ride="carousel">
			
			<!-- carousel progress -->
			<div class="carousel-progress">
				<span data-target="#testCarousel"></span>
			</div>
			<!--/carousel progress -->
			
			<div class="carousel-inner">
				<div class="carousel-item item-1 active">
					<div class="carousel-caption d-none d-md-block">
						<h5>Slide #1</h5>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
				<div class="carousel-item item-2">
					<div class="carousel-caption d-none d-md-block">
						<h5>Slide #2</h5>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
				<div class="carousel-item item-3">
					<div class="carousel-caption d-none d-md-block">
						<h5>Slide #3</h5>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
			</div>
			<a class="carousel-control-prev" href="#testCarousel" role="button" data-slide="prev"></a>
			<a class="carousel-control-next" href="#testCarousel" role="button" data-slide="next"></a>
		</div>

	</div>

// autoprefixer: true

html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#wrap {
	position: relative;
}

.centerer {
	width: 100%;
	padding: 20px;
	max-width: 1200px;
	margin: auto;
}

.carousel-item {
	height: 360px !important;
	
	&.item-1 {
		background: #222;
	}
	
	&.item-2 {
		background: #444;
	}
	
	&.item-3 {
		background: #666;
	}
	
	&.item-4 {
		background: #888;
	}
}

.carousel-control-prev {
	&::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 24px;
		height: 24px;
		border-top: 2px solid #fff;
		border-left: 2px solid #fff;
		transform: rotate(-45deg);
	}
}

.carousel-control-next {
	&::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 24px;
		height: 24px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: rotate(45deg);
	}
}

.carousel-progress {
	position: absolute;
	right: 0;
    bottom: 30px;
    left: 0;
    z-index: 15;
    margin-right: 15%;
    margin-left: 15%;
	height: 1px;
	background: #999;
	
	span {
		display: block;
		background: #fff;
		transition: width .6s ease;
		height: 100%;
		width: 0;
	}
}

function setCarouselProgress(index) {
	var $cProgress = $('#testCarousel').find('.carousel-progress span'),
		slidesLen = $('#testCarousel').find('.carousel-item').length;

	$cProgress.width(100 / slidesLen * index + '%');
}

$(function () {

	setCarouselProgress($('#testCarousel').find('.carousel-item.active').index() + 1);

	$('#testCarousel').on('slide.bs.carousel', function (e) {
		setCarouselProgress(e.to + 1);
	});

});