<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>
<!------ Include the above in your HEAD tag ---------->
<!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>
</html>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
.monitor {background:url(http://www.christianluneborg.com/monitor.jpg) no-repeat; width:1396px; height:602px; z-index: 1; position: absolute;}
.mouse {width:1396px; height:355px; z-index: 1; position: absolute; top:602px;}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
background: #E26A6A;
color: #ECF0F1;
}
h1 {
text-align: center;
font-weight: 300;
}
.wrapper3 {
width:100%;
margin: 0;
}
#slider {
position: absolute;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
top: 81px;
left: 280px;
z-index: 2;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block!important;
float: left;
margin: 0;
padding: 0;
width: 811px;
height: 472px;
background: #000000;
text-align: center;
line-height: 300px;
}
#slider a.control_prev, #slider a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 2% 1.5%;
width: auto;
height: auto;
background: #1c1c1c;
color: #ECF0F1;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.3;
cursor: pointer;
}
#slider a.control_prev:hover, #slider a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#slider a.control_prev {
border-radius: 0 5px 5px 0;
}
#slider a.control_next {
right: 0;
border-radius: 5px 0 0 5px;
}
.slider_option {
margin: 10px auto;
width: 160px;
font-size: 18px;
}
// JavaScript Document
$(document).ready(function() {
var slider = $('#slider'),
sliderList = $('#slider ul'),
sliderListItem = $('#slider ul li'),
slideCount = sliderListItem.length,
slideWidth = sliderListItem.width(),
slideHeight = sliderListItem.height(),
sliderUlWidth = slideCount * slideWidth;
slider.css({
width: slideWidth,
height: slideHeight
});
sliderList.css({
width: sliderUlWidth,
marginLeft: -slideWidth
});
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
sliderList.animate({
left: +slideWidth
}, 200, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
sliderList.css('left', '');
});
};
function moveRight() {
sliderList.animate({
left: -slideWidth
}, 200, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
sliderList.css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
$('#checkbox').change(function() {
setInterval(function() {
moveRight();
}, 3000);
});
});
