OCU Carousel Object - Double Testing

1.8 attempting to fit two on one screen to test object-instantiation capabilities

by Nate Armstrong

HTML

<script src="https://www.ohiochristian.edu/sites/default/files/bootstrap-native-v4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://www.ohiochristian.edu/sites/default/files/ocu.style.css">
<div class="container">
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">NEWS</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">SPORTS</label>
  <section id="content1">
    <div class="row ocu-carousel">
      <!-- ROW -->
      <div class="carousel slide col-sm-5 col-md-6 col-lg-7" data-ride="carousel" data-interval="5000">
        <div class="carousel-inner">
          <div class="carousel-item">
            <div class="carousel-image-container"><a href="#"><img src="http://dev.ohiochristian.edu/sites/default/files/news_1.jpg"></a><span>FEBRUARY 5TH, 2019</span></div>
            <h3 class="carousel-text"><a href="#">Marketing and Consumer Behavior Degree Opens Doors</a></h3>
            <p class="carousel-text">Ohio Christian University’s Information Technology and Data Analytics degrees train students for high-tech careers in today’s ever-changing environment. By offering both a Bachelor of Science in Information Technology and a Bachelor of Science
              in Data Analytics, OCU prepares students to meet all the challenges in these continually growing and evolving fields.</p>
          </div>
          <div class="carousel-item">
            <div class="carousel-image-container"><a href="#"><img src="http://dev.ohiochristian.edu/sites/default/files/news_2.jpg"></a><span>FEBRUARY 8TH, 2019</span></div>
            <h3 class="carousel-text"><a href="#">4.0 Students Recognized in Chapel Service</a></h3>
            <p class="carousel-text">The January 23rd Chapel Service included a time of recognition for students who achieved a 4.0 grade point average during the fall semester. Dr. Hank Kelly, Provost, presented each awardee...

SCSS

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}

label:hover {
  color: #789;
  cursor: pointer;
}

input:checked + label {
  color: #0af;
  border: 1px solid #abc;
  border-top: 2px solid #0af;
  border-bottom: 1px solid #fff;
}

section {
  opacity: 0;
  padding: 10px 0 0;
  border-top: 1px solid #abc;
  top:0px;
  position:relative;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2{
  opacity: 1;
}

.carousel.slide, #outside-controls-container {
  margin:0px;
  padding:0px 10px 0px 0px;
}

.carousel-inner{
  background-color: #f1f1f3;
}

.carousel-item {
  transition: 0.4s;
  div.carousel-image-container{
    background-repeat: no-repeat !important;
    background-size: cover  !important;
    background-position: center center !important;
    a {
      display: flex;
      width: 100%;
      height: 100%;
      overflow: hidden;
      justify-content: center;
      img{
        object-fit: cover;
        min-width: 100%;
      }
    }
    span{
    background-color: rgba(19, 106, 177, 0.7);
    position: relative;
    height: 25px;
    bottom: 25px;
    display: inline-block;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 16px;
    color:white;
    }
  }
  h3.carousel-text{
    width: auto;
    height:70px;
    padding: 1.5vw;
    font-size: 1em;
    line-height:1.2em;
    background-color: #f1f1f3;
    color: #0453a0;
    margin:0px;
  }
  p.carousel-text{
    background-color: #f1f1f3;
    color: #141416;
    font-size: 1em;
    padding: 0px 1.5vw 1.5vw 1.5vw;
    height:10vw;
    margin:0px;
  }
}

.thumbnail-marker{
  background-color:#136ab1;
  width:105%;
  display:block;
  top:0px;
  position:absolute;
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 7% 100%, 0 50%);
  transition: 0.4s;
  transition-timing-function: ease-in-out;
  margin-left:-5%;
}

.thumbnail-controls{
  padding:0px 0px 0px...

JavaScript

/*
 * This function primarily watches the Bootstrap Carousel and interacts
 * with a side thumbnail menu.  The object instantiation is due to the 
 * possibility that more than one carousel maybe active at a time.
 * other features include
 *  • auto-resizing of the thumbnail menu
 *  • All images being a background-image to allow for auto-centering and cropping
 *  • Automatic text redaction based on dynamic re-sizing of the container
 */


// this object is instatiated as window.OCU.carousels[x];
var OCUCarousel = function(index, element) {
  this.childCarousel = index;
  this.element = element;
  this.carousel = window.document.getElementsByClassName('carousel');
  this.imageContainers = this.element.getElementsByClassName('carousel-image-container');
  this.carouselText = this.element.getElementsByClassName('carousel-text');
  this.thumbnailTextP = this.element.querySelectorAll('.thumbnail-text > p');
  this.carouselInner = this.element.querySelectorAll('.carousel-inner');
  this.thumbnails = this.element.querySelectorAll('.thumbnail');
  this.carouselItems = this.element.querySelectorAll('.carousel-item');
  this.marker = this.element.querySelector('.thumbnail-marker');
  this.ratio = .7322; // the Ratio is used to determine the height vs width of the image
  // This init function is run at the bottom of the object. 
  this.init = function() {
    console.log('OCU.carousels[' + this.childCarousel + '] instantiated');
    this.matchHeights();
    this.setThumbnailImages();
    window.addEventListener("resize", this);
    this.addCLickEvents(this.thumbnails);
    this.startObservation();
  };

  // set thumbnail background images based on carousel images to reduce load times and image sizes
  this.setThumbnailImages = function() {
    // collect correct THIS HTML NodeList
    let carouselImages = this.element.querySelectorAll('.carousel-image-container img');
    let thumbnailImageDIV = this.element.querySelectorAll('div.thumbnail-image');
    // ES6 function...