<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 class="slideshow"> <div class="slide current" style="background-image:url(//az619519.vo.msecnd.net/files/CanadianSnails_EN-US13407952508_1366x768.jpg);"></div> <div class="slide" style="background-image:url(//az619822.vo.msecnd.net/files/NaturalBridgesStateBeach_EN-US12286247597_1366x768.jpg);"></div> <div class="slide" style="background-image:url(//az619822.vo.msecnd.net/files/AlNeversinkPit_EN-US10271991250_1366x768.jpg);"></div> </div>

.slideshow { background: #000; } .slideshow, .slideshow .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slideshow .slide { background-position: center; background-size: cover; opacity: 0; } .slideshow .slide.previous { z-index: 1; opacity: 1; } .slideshow .slide.current { z-index: 2; -webkit-animation: fadein 5000ms linear both; animation: fadein 5000ms linear both; } @-webkit-keyframes fadein { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }

var $current, $next, $slides = $(".slideshow .slide"); function doSlideShow () { $current = $slides.filter(".slide.current"); $next = $current.next(".slide"); if ($next.length < 1) { $next = $slides.first(); } $slides.removeClass("previous"); $current.addClass("previous").removeClass("current"); $next.addClass("current"); window.setTimeout(doSlideShow, 5000); } window.setTimeout(doSlideShow, 5000);