carousel.js

   /* Subsequent Tasks */

const findTheCarousel = function(decendant) {
   var parent = decendant.parentElement;
   var parentIsCarousel = (parent.className == 'carousel');
   if (parentIsCarousel)   return parent;
   else                    return findTheCarousel(parent);
};

const findAllIndicators = function(carousel) {
   return Array.from(carousel.children)
      .filter(function(element) {
         return element.className.includes('carousel-indicator');
      });
}; // findAllIndicators

const findNextIndicator = function(carousel) {
   var allIndicators = findAllIndicators(carousel);
   var currnetIndex = allIndicators
      .findIndex((indicator) => indicator.checked);
   // - - -
   if (currnetIndex != allIndicators.length - 1)
      return allIndicators[currnetIndex + 1];
   else
      return allIndicators[0];
}; // findNextIndicator

   /* Event Listeners */

const changeToFirstIndex = function(event) {
   var theCarousel = findTheCarousel(event.target);
   var [firstIndicator] = findAllIndicators(theCarousel);
   firstIndicator.dispatchEvent(new MouseEvent('click'));
};

const changeToLastIndex = function(event) {
   var theCarousel = findTheCarousel(event.target);
   var [lastIndicator] = findAllIndicators(theCarousel).reverse();
   lastIndicator.dispatchEvent(new MouseEvent('click'));
};

   /* Creating Buttons & Binding Listeners */

var allCarousels = document.querySelectorAll('.carousel');

const createButton = function (className) {
   var button = document.createElement('button');
   button.className = className;
   return button;
};

Array.from(allCarousels)
   .forEach(function(carousel) {
      var firstButton = createButton('carousel-button first');
      firstButton.addEventListener('click', changeToLastIndex);
      carousel.prepend(firstButton);
      // - - -
      var lastButton = createButton('carousel-button last');
      lastButton.addEventListener('click', changeToFirstIndex)
      carousel.prepend(lastButton);
   });

   /* Auto-Change Index */

const addAutoChangeFeature = function(carousel) {
      /* Set Auto-Change */
   var timer = null;
   var delay = 5 * 1000;
   const changeToNextIndex = function() {
      var nextIndicator = findNextIndicator(carousel);
      nextIndicator.dispatchEvent(new MouseEvent('click'));
      timer = window.setTimeout(changeToNextIndex, delay)
   };
   timer = window.setTimeout(changeToNextIndex, delay);

      /* Create & Return Debouncer */
   const debounceTimer = function(event) {
      window.clearTimeout(timer);
      timer = window.setTimeout(changeToNextIndex, 30 * 1000);
   };
   return debounceTimer;
}; // addAutoChangeFeature

Array.from(allCarousels)
   .forEach(function(carousel) {
      var debounceAutoChange = addAutoChangeFeature(carousel);
      carousel.addEventListener('click', debounceAutoChange);
   });