<div class="container">

<div class="slide-window">
	<div class="slide-holder" id="slide-holder"> 
		<div class="slide">
			<img class="img-q" src="https://dummyimage.com/600x400/669BBC/fff" alt="">
		</div>
		<div class="slide">
			<img class="img-reponsive" src="https://dummyimage.com/600x400/DE6449/fff" alt="">
		</div>
		<div class="slide">
			<img class="img-reponsive" src="https://dummyimage.com/600x400/3E885B/fff" alt="">
		</div>
	</div>
	<div class="slide-nav" id="slide-nav">
		
	</div>
</div>

	</div>

//colors
$blue: blue;
$white: #fff;
$black: #000;

.container {
	width: 50%;
	margin: 0 auto;
}
.slide-window {
	height: auto;
	overflow: hidden;
	position: relative;
	img {
		width: 100%;
	}
}
.slide-holder {
	background-color: $blue;
	margin-left: 0;
	transition: margin-left 1s;
}
.slide {
	height: auto;
	float: left;
}
.slide-nav {
	position: absolute;
	width: 100%;
	height: 20px;
	left: 0;
	bottom: 10px;
	text-align: center;
	z-index: 100;
}
.slide-nav-bt {
	width: 9px;
	height: 9px;
	background-color: $white;
	border: solid 1px transparent;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
	&.active {
		background-color: $black;
		border: solid 1px $white;
	}
}

$( document ).ready(function() {	

	var slidePosition=0;
	var numOfSlide = $("#slide-holder > div").size();
	
	$("#slide-holder").css("width",(numOfSlide*100)+"%");
	$(".slide").css("width",(100/numOfSlide)+"%");
	
	for (var a = 0; a < numOfSlide; a++) {
		$('#slide-nav').append(' <a href="javascript: void(0)" class="slide-nav-bt'+(a===0?' active':'')+'">  </a> ');
	}
	
	$('.slide-nav-bt').click(function() {
		moveSlide($(this));
		clearInterval(autoPlaySlideInter);
	});
	
	function moveSlide(thisa) {
		var thisindex = $('#slide-nav a').index(thisa);
		$('#slide-holder').css("margin-left", '-'+thisindex +'00%');
		$('#slide-nav a').removeClass('active');
		thisa.addClass('active');
	}
	
	function autoPlaySlide() {
		slidePosition++;
		if (slidePosition == numOfSlide) { slidePosition = 0; }
		moveSlide($("#slide-nav").children(".slide-nav-bt:eq("+slidePosition+")"));
	}
	
	var autoPlaySlideInter = setInterval(autoPlaySlide,3000);
});