<div id="block">
	<div class="mainimage">
		<h1 class="gorsel">Görsel 1</h1>
	</div>

	<div class="mainimage2">
		<h1 class="gorsel2">Görsel 2</h1>
	</div>
	<div class="mainimage3">
		<h1 class="gorsel">Görsel 3</h1>
	</div>
	<div class="mainimage4">
		<h1 class="gorsel">Görsel 4</h1>
	</div>
	<div class="col-xs-12 col-md-12 col-lg-12">
		<h3 id="slidertitle">1. Görsel</h3>
	</div>

	<div id="sliderbuttons">
		<center>
			<button id="button1"><h1>1</h1></button>
			<button id="button2"><h1>2</h1></button>
			<button id="button3"><h1>3</h1></button>
			<button id="button4"><h1>4</h1></button>
		</center>
	</div>
</div>

.mainimage {
	width: 45%;
	height: 200px;
	background-image: linear-gradient(to left, blue, aqua);
	background-clip: padding-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: auto;
	margin-top: 5%;
	z-index: 2;
}

.mainimage2 {
	width: 45%;
	height: 200px;
	background-image: linear-gradient(to left, gray, black);
	background-clip: padding-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: auto;
	margin-top: 5%;
	z-index: 0;
	display: none;
}

.mainimage3 {
	width: 45%;
	height: 200px;
	background-image: linear-gradient(to left, rgb(17, 129, 92), rgb(120, 218, 125));
	background-clip: padding-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: auto;
	margin-top: 5%;
	z-index: 0;
	display: none;
}

.mainimage4 {
	width: 45%;
	height: 200px;
	background-image: linear-gradient(to left, rgb(85, 19, 129), rgb(113, 94, 219));
	background-clip: padding-box;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin: auto;
	margin-top: 5%;
	z-index: 0;
	display: none;
}

#slidertitle {
	text-align: center;
	color: white;
}

button {
	background-color: black;
	width: 75px;
	height: 75px;
	background-color: white;
	color: black;
	background-repeat: no-repeat;
	border: none;
	display: inline-block;
	text-align: center;
}

#button1 {
	margin: auto;
}

#button2 {
	margin: auto;
}

#button3 {
	margin: auto;
}

#button4 {
	margin: auto;
}

#flexcenter {
	display: block;
}

.hide {
	display: none;
}

#sliderbuttons {
	margin-left: 15px;
}

.gorsel {
	text-align: center;
	color: black;
	font-family: sans-serif;
}

.gorsel2 {
	text-align: center;
	color: white;
	font-family: sans-serif;
}

$('#button1').click(function () {
	$('.mainimage2').slideUp();
	$('.mainimage3').slideUp();
	$('.mainimage4').slideUp();
	$('.mainimage').slideDown();
	$('#slidertitle').text('1. Görsel');
});
$('#button2').click(function () {
	$('.mainimage').slideUp();
	$('.mainimage3').slideUp();
	$('.mainimage4').slideUp();
	$('.mainimage2').slideDown();
	$('#slidertitle').text('2. Görsel');
});
$('#button3').click(function () {
	$('.mainimage').slideUp();
	$('.mainimage2').slideUp();
	$('.mainimage4').slideUp();
	$('.mainimage3').slideDown();
	$('#slidertitle').text('3. Görsel');
});
$('#button4').click(function () {
	$('.mainimage').slideUp();
	$('.mainimage2').slideUp();
	$('.mainimage3').slideUp();
	$('.mainimage4').slideDown();
	$('#slidertitle').text('4. Görsel');
});