<h1>Super Simple Slider</h1>

<h2>I am a responsive slider!<br />
  (but if you remove my 'responsive' class,<br />
  I'm a fixed-width slider.)</h2>
<div class="slider responsive" width='450' height='251'>
  <div src="https://i.imgur.com/fQ8oeSF.jpg"></div>
  <div src="https://i.imgur.com/7uQRgId.jpg"></div>
  <div src="https://i.imgur.com/cT5TSuN.jpg"></div>
</div>

<!--
<h2>I am a fixed width slider!</h2>
<div class="slider" width='450' height='251' responsive='false'>
  <div src="https://i.imgur.com/fQ8oeSF.jpg"></div>
  <div src="https://i.imgur.com/7uQRgId.jpg"></div>
  <div src="https://i.imgur.com/cT5TSuN.jpg"></div>
</div>-->

body {
  background: #E6E6E6;
  text-align: center;
  font-family: Trebuchet MS, Helvetica, san-serif;
  color: #666;
}


/* ----- SLIDER ----- */

.slider {
  display: block;
  border: 10px solid #FFF;
  background: #FFF;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, .3);
  overflow: hidden;
  position: relative;
  margin: 20px auto;
}

.slide {
  background-size: cover;
  background-position: center center;
  max-width: 100%;
  min-width: 100%;
  position: absolute;
  display: none;
}

.slide.active {
  z-index: 100;
  display: block;
}

.slide.next {
  z-index: 50;
  display: block;
}

.dots {
  position: absolute;
  z-index: 200;
  width: 100%;
  text-align: center;
  bottom: 10px;
  height: 15px;
}

.dots span {
  background: rgba(0, 0, 0, .2);
  display: inline-block;
  box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
  width: 9px;
  height: 9px;
  border-radius: 9px;
  margin: 3px;
}

.dots span.active {
  background: rgba(0, 0, 0, .8);
}

//You can remove the 'responsive' class from
//the slider to make it fixed-width.
//find more stuff at http://megdal.be

//edit: fixed bug where responsive slider 
//didn't work until window resize.

$(".slider").each(function() {
  s = $(this);

  //create dots and slides
  d = $("<div class='dots'>");
  s.find("div").each(function(i, e) {
    sl = $(this);
    src = sl.attr("src");
    sl.removeAttr("src");
    sl.css("background-image", "url('" + src + "')").addClass("slide");

    if (i == 0) {
      d.append("<span class='active'>");
      sl.addClass("active");
    } else if (i == 1) {
      d.append("<span class='next'>");
      sl.addClass("next");
    } else {
      d.append("<span>");
    }
  });
  s.append(d);

  //create fading slider
  setInterval(function() {
    s.find(".slide.active").fadeOut(function() {
      s.find(".slide.active").removeClass("active");
      s.find("span.active").removeClass("active");

      c = s.find(".slide.next");
      cD = s.find("span.next");
      c.removeClass("next").addClass("active");
      cD.removeClass("next").addClass("active");

      n = c.next();
      nD = cD.next();
      if (n.is(".slide")) {
        n.addClass("next");
        nD.addClass("next");
      } else {
        n = s.find(".slide:first-child");
        n.addClass("next");
        s.find(".dots span:first-child").addClass("next");
      }
      n.fadeIn();
    });
  }, 5000);

  //create responsive or static
  if (s.hasClass("responsive")) {
    resizeMe(s);
  } else {
    s.css('width', s.attr('width')).css('height', s.attr('height'));
    s.find('div').css('width', s.attr('width')).css('height', s.attr('height'));
  }
});

$(window).resize(function() {
  $(".slider").each(function() {
    s = $(this);
    if (s.hasClass("responsive")) {
      resizeMe(s);
    }
  });
});

function resizeMe(s) {
  w = s.parent().width() - 30; //30 is the margin + border width * 2. Change this to whatever you want for more/less space around slider.
  h = w / s.attr('width') * s.attr('height')
  s.css('width', w).css('height', h);
  s.find('.slide').css('width', w).css('height', h);
}