Simple JS Slideshow #1

Slideshow with simple JS and CSS

by Matthew Schenker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="slideshow">
  <div class="slidebox">
    <img class="slide" src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
    <a class="slidelink" href="http://www.amazon.com">Go to Amazon (1)!</a> 
  </div>
  <div class="slidebox">
    <img class="slide" src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
     <a class="slidelink" href="http://www.amazon.com">Go to Amazon (2)!</a> 
  </div>
</div>

CSS

.slideshow {
  margin: 50px auto;
  position: relative;
  width: 100%;
  height: 100%;
}

.slidebox {
  position: absolute;
  width: 100%;
}

.slide {
   width: 100%;
 }

.slidelink {
  position: relative;
  bottom: 0;
  z-index: 1;
}

JavaScript

$(".slideshow > div:gt(0)").hide();

setInterval(function() {
  $('.slideshow > div:first')
    .fadeOut(4000)
    .next()
    .fadeIn(4000)
    .end()
    .appendTo('.slideshow');
}, 4000);