<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</head>
<body>
<div class="wrapper3">
<div style="text-align: center; margin: 0 auto; min-width: 100%; left: 0; right: 0; padding: 0; position:absolute; margin-left:-250px; left:25%; border: solid 2px #333300;">
<div id="slider">
<a href="#websites" class="control_next" onmousedown="document.getElementById('myImage').src='http://www.christianluneborg.com/monitor-on.jpg'" onmouseup="document.getElementById('myImage').src='http://www.christianluneborg.com/monitor-off.jpg'">></a>
<a href="#websites" class="control_prev" onmousedown="document.getElementById('myImage').src='http://www.christianluneborg.com/monitor-on.jpg'" onmouseup="document.getElementById('myImage').src='http://www.christianluneborg.com/monitor-off.jpg'"><</a>
<ul>
<li><img src="https://s4.postimg.org/7wuqpqhhp/img1.jpg" /></li>
<li><img src="https://s3.postimg.org/3zwn4xeyr/img1.jpg" /></li>
<li><img src="https://s12.postimg.org/5fi8e5oq5/img1.jpg" /></li>
<li><img src="https://s4.postimg.org/7wuqpqhhp/img1.jpg" /></li>
<li><img src="https://s3.postimg.org/3zwn4xeyr/img1.jpg" /></li>
</ul>
</div>
<div class="monitor">·</div>
<div class="mouse"><img class="monitor2_img" src="http://www.christianluneborg.com/monitor-off.jpg" id="myImage" /></div>
</div>
</div>
</body>