Reactive slideshow v1

slideshow.css

/* Slates */

.slate {
  height: 450px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.slate.slate-min {
  height: 200px;
}
.slate.slate-lrg {
  height: 600px;
}
.slate .float-box {
  padding: 40px 100px;
  background: rgba(0, 0, 0, .35);
}
.slate .content {
  max-width: 40%;
}
.slate .content>* {
  color: #f8f9fa;
}

/* Slideshow */

.slideshow .slide {
  height: 100%;
  display: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.slideshow .slide .content {
  display:none;
  margin-left:10px;
  opacity:0;
}
.slideshow:hover [class*='select-arrow-'] {
  display: inline-block;
}
.slideshow [class*='select-arrow-'] {
  display: none;
  position: absolute;
  top: 50%;
  padding: 15px 10px;
  background: #f8f9fa;
  font-size: 18px;
  color: #212529;
  cursor: pointer;
  z-index: 96;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.slideshow .select-arrow-left {
  left: 0;
}
.slideshow .select-arrow-right {
  right: 0;
}
.slideshow .select-bubbles {
  display: inline-block;
  position: absolute;
  list-style-type: none;
  bottom: 20px;
  left: 50%;
  z-index: 96;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.slideshow .select-bubbles li {
  display: inline-block;
  margin: 0 2px;
}
.slideshow .select-bubbles li>* {
  font-size: 5px;
  color: #f8f9fa;
}

Slideshow.html

<div class="slate slideshow mrg-btm-msv">
  <div class="slide" style="background-image:url('../assets/images/landing.jpg');">
    <div class="float-box">
      <div class="content pull-ver-center">
        <h4 class="mrg-btm-med">Project Management</h4>
        <h5 class="mrg-btm-lrg">In vestibulum neque in purus condimentum, non mattis tortor lobortis.</h5>
        <div class="buttons">
          <a class="btn btn-invert mrg-rgt" href="#">Learn more<i class="fa fa-fw fa-angle-right"></i></a>
          <a class="btn btn-invert" href="#">Get started<i class="fa fa-fw fa-angle-right"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="slide" style="background-image:url('../assets/images/landing-student.jpg');">
    <div class="float-box">
      <div class="content pull-ver-center">
        <h4 class="mrg-btm-med">Built for everyone</h4>
        <h5 class="mrg-btm-lrg">Vivamus congue tortor sed velit ultricies, sed egestas nibh dapibus.</h5>
        <div class="buttons">
          <a class="btn btn-invert mrg-rgt" href="#">Learn more<i class="fa fa-fw fa-angle-right"></i></a>
          <a class="btn btn-invert" href="#">Sign up<i class="fa fa-fw fa-angle-right"></i></a>
        </div>
      </div>
    </div>
  </div>
</div>

slideshow.js

$(function() {
  slideshow();
});

function slideshow() {
  var slideshow = $('.slideshow');
  var slides = slideshow.children('.slide');
  var slide_count = slides.length;
  var current_slide = 0;
  var last_slide = 0;
  var change_time = 10000;
  var content_time = 250;

  var bubbles;

  slideshow_generate_controls();

  var current = slides.eq(current_slide);
  var current_content = current.find('.content');
  var current_bubble = bubbles.eq(current_slide).children();

  var last;
  var last_content;
  var last_bubble;

  slideshow_show();

  // run slideshow
  var slider = window.setInterval(function() {
    current = slides.eq(current_slide);
    current_content = current.find('.content');
    current_bubble = bubbles.eq(current_slide).children();

    if (current_slide != 0)
      last_slide = current_slide - 1;
    else
      last_slide = (slide_count - 1);

    last = slides.eq(last_slide);
    last_content = last.find('.content');
    last_bubble = bubbles.eq(last_slide).children();

    slideshow_hide();

    if (current_slide < (slide_count - 1))
      current_slide++;
    else if (current_slide == (slide_count - 1))
      current_slide = 0;
  }, change_time);

  function slideshow_show() {
    current.css('display', 'block');
    current_content.css('display', 'block');
    bubbles.find('.fa-circle').toggleClass('fa-circle fa-circle-thin');
    current_bubble.toggleClass('fa-circle fa-circle-thin');

    current_content.animate({
      'opacity': 1,
      'margin-left': 0
    }, content_time);
  };

  function slideshow_hide() {
    last_content.animate({
      'opacity': 0,
    }, content_time, function() {
      last.css('display', 'none');
      last_bubble.toggleClass('fa-circle fa-circle-thin');

      last_content.css({
        'display': 'none',
        'margin-left': '10px'
      });

      slideshow_show();
    });
  };

  function slideshow_generate_controls() {
    var bubble_count = 0;
    var select_bubbles;

    slideshow.append('<i class="select-arrow-left fa fa-angle-left"></i>');
    slideshow.append('<i class="select-arrow-right fa fa-angle-right"></i>');
    slideshow.append('<div class="select-bubbles"></div>');

    select_bubbles = slideshow.find('.select-bubbles');

    while (bubble_count < slide_count) {
      select_bubbles.append('<li><i class="fa fa-fw fa-circle-thin"></i></li>');
      bubble_count++;
    };

    bubbles = select_bubbles.children();
  }
}