<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="slide-container"> <img id="vignette" src="https://data.a-class.mercedes-benz.com.cn/v4-cn/desktop/image/vignette_outro.png"/> <ul id="slides"> <li class="slide buried" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KMjVHRd/0/X3/Andramada-X3.jpg);"></li> <li class="slide buried" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-JSxf5Nm/0/X3/Burning-Man-Day-6%20%28202%20of%201606%29-X3.jpg);"></li> <li class="slide buried" style="background-image:url(http://stuckincustoms.smugmug.com/Burning-Man/i-dd9xmfn/0/X3/The%20Steamy%20Car-X3.jpg);"></li> <li class="slide buried" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KscS8CF/0/X3/Burning-Man-Day-1%20%281006%20of%201210%29-X3.jpg);"></li> <li class="slide buried" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-jQcPqJb/0/X3/Burning-Man-Last-Day-Night%20%28151%20of%201120%29-X3.jpg);"></li> </ul> <span class="nav fa fa-chevron-left fa-3x" id="left"></span> <span class="nav fa fa-chevron-right fa-3x" id="right"></span> </div> <script> $.global = new Object(); $.global.item = 1; $.global.total = 0; $(document).ready(function() { $("#slides li:nth-child(1)").removeClass('buried'); var SlideCount = $('#slides li').length; $.global.total = SlideCount; $('#left').click(function() { Slide('back'); }); $('#right').click(function() { Slide('forward'); }); }); function Slide(direction) { if (direction == 'back') { var $target = $.global.item - 1; } if (direction == 'forward') { var $target = $.global.item + 1; } if ($target == 0) { DoIt($.global.total); } else if ($target > $.global.total) { DoIt(1); } else { DoIt($target); } } function DoIt(target) { $('.slide').addClass('buried'); $.global.item = target; var $newtarget = $("#slides li:nth-child("+target+")"); $newtarget.removeClass('buried'); } </script>

html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /* Hide the scrollbar... */ body::-webkit-scrollbar { display: none; } #slide-container { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#000; } #slides { position:absolute; width:100%; height:100%; overflow:hidden; padding:0px; margin:0px; } .slide { list-style:none; position:absolute; width:100%; height:100%; opacity:1.0; background-size:cover; background-position:50% 50%; transition: all 1s linear; -webkit-transition: all 1s linear; } .buried { opacity:0.0; visibility:hidden; } .nav { position:fixed; z-index:99; top:50%; cursor:pointer; color:#fff; opacity:0.7; transition: all 0.66s ease; -webkit-transition: all 0.66s ease; } .nav:hover { opacity:1.0; } #left { left:3%; } #right { right:3%; } #vignette { position:absolute; left:0px; top:0px; z-index:9; width:100%; height:100%; }