<header>
<h2>A Simple Carousel - HTML, CSS & 'Vanilla' JavaScript Only</h2>
<p>Based on <a href="https://christianheilmann.com/2015/04/08/keeping-it-simple-coding-a-carousel/">'Keeping it simple: coding a carousel'</a> by <a href="http://christianheilmann.com">Christian Heilmann</a></p>
<div>
  <hr>
</div>
  </header>
<section class="delivery-options">
  <div class="carouselbox">
    <div class="buttons">
      <button class="prev">< <span class="offscreen">Previous</span></button>
    </div>
    <ol class="content">
      <li><a href="#">Free UK Delivery</a></li>
      <li><a href="#">Next Day Delivery</a></li>
      <li><a href="#">Reserve & Collect</a></li>
      <li><a href="#">Tax Free Cyclescheme</a></li>
    </ol>
    <div class="buttons">
      <button class="next"><span class="offscreen">Next</span> ></button>
    </div>
  </div>
</section>

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  max-width: 1280px;
  margin: 0 auto;
}

.buttons, .content {
  display: inline-block;
  vertical-align: top;
}

.carouselbox {
  font-size: 14px;
  max-width: 300px;
  /* position: relative; */
  margin: 0 auto;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px #ccc;
  overflow: hidden;
}

.content {
  margin: 0;
  padding: 0;
}

.content li {
  /* font-size: 100px; */
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  text-align: center;
  /* z-index: 2; */
}

.active {
  height: 130px;
}

.carouselbox button {
  border: none;
  visibility: hidden;
}

.active button {
  visibility: visible;
}

.offscreen {
  position: absolute;
  left: -2000px;
}

.active .buttons {
  padding: 5px 0;
  background: #eee;
  text-align: center;
  /* z-index: 10; */
  position: relative;
}

.active li a {
  color: #369;
  text-decoration: none;
}

.active li {
  /* position: absolute; */
  /* top: 30px; */
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  transition: 1s;
}

.active li.current {
  top: 30px;
  pointer-events: auto;
  opacity: 1;
  transform: scale(1);
  transition: 1s;
}

carousel = (function() {
  if (!document.querySelector || !("classList" in document.body)) {
    return false;
  }
  // Read necessary elements from the DOM once
  var box = document.querySelector(".carouselbox");
  var next = box.querySelector(".next");
  var prev = box.querySelector(".prev");
  // Define the global counter, the items and the
  // current item
  var counter = 0;
  var items = box.querySelectorAll(".content li");
  var amount = items.length;
  var current = items[0];
  // hide all elements and apply the carousel styling
  box.classList.add("active");
  // navigate through the carousel
  function navigate(direction) {
    // hide the old current list item
    current.classList.remove("current");

    // calculate th new position
    counter = counter + direction;
    // if the previous one was chosen
    // and the counter is less than 0
    // make the counter the last element,
    // thus looping the carousel
    if (direction === -1 && counter < 0) {
      counter = amount - 1;
    }
    // if the next button was clicked and there
    // is no items element, set the counter
    // to 0
    if (direction === 1 && !items[counter]) {
      counter = 0;
    }
    // set new current element
    // and add CSS class
    current = items[counter];
    current.classList.add("current");
  }
  // add event handlers to buttons
  next.addEventListener("click", function(ev) {
    navigate(1);
  });
  prev.addEventListener("click", function(ev) {
    navigate(-1);
  });
  // show the first element
  // (when direction is 0 counter doesn't change)
  navigate(0);
})();