Better carousel / slider with label navigation & CSS animation

/*Downloaded from https://www.codeseek.co/chrishutchinson/better-carousel-slider-with-label-navigation-andamp-css-animation-jsgEe */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

a {
  color: #E56C00;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  font-weight: 300;
  margin: 0;
  padding: 0;
  line-height: 1.4em;
}

ul {
  margin: 0;
  padding: 0;
}

div.container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

div.wrapper {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

ul.slider {
  letter-spacing: -4px;
  list-style-type: none;
  width: 300%;
  overflow: hidden;
  margin-left: 0px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
ul.slider li.slide {
  letter-spacing: normal;
  float: left;
  height: 300px;
  width: calc(100%/3);
  position: relative;
}
ul.slider li.slide div.info {
  background: rgba(255, 255, 255, 0.7);
  padding: 20px;
  width: 100%;
  position: absolute;
  top: 20px;
  left: 0px;
}

ul.navigation {
  list-style-type: none;
  text-align: center;
  letter-spacing: -4px;
  width: 100%;
  position: absolute;
  bottom: 20px;
}
ul.navigation li {
  display: inline-block;
  letter-spacing: normal;
}
ul.navigation li a {
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 20px;
  display: block;
  margin: 0 4px 8px;
  font-size: 18px;
}
ul.navigation li a:hover, ul.navigation li a.active {
  background: rgba(0, 0, 0, 0.6);
  color: #FFF;
}

/*Downloaded from https://www.codeseek.co/chrishutchinson/better-carousel-slider-with-label-navigation-andamp-css-animation-jsgEe */
$(document).ready(function(){
  var actions = {
    switchSlide: function(e){
      e.preventDefault(); // Prevent standard event
      $('ul.navigation').find('a.active').removeClass('active'); // Remove all active classes
      $(this).addClass('active'); // Add active to the clicked item
      var index = $(this).parent().index(); // Get the index of the clicked item 
      index++; // Add one to the index (this make sure we can target the correct slide)
      var slide = $('ul.slider').find('li.slide:nth-of-type(' + index + 'n)'); // Grab the slide we're switching to based on the anchor that was clicked
      var leftDistance = slide.offset().left; // Get distance of slide from left
      var currentMargin = $('ul.slider').offset().left; // Get distance of slider from left (in case it has already been transitioned)
      var total = leftDistance - currentMargin; // Do the math!
      $('ul.slider').css('margin-left', '-' + total + 'px'); // Apply the CSS which moves the slider
    } 
  };
                  
  $('body').on('click', '[data-action]', function(){
    var action = $(this).data('action');
    if(action in actions){
      actions[action].apply(this, arguments);
    }
  });
});