"slider"
Bootstrap 4.1.1 Snippet by prokash

<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); }); });

Related: See More


Questions / Comments: