OCU Carousel Object

The Fifth Iteration - Taking the project into an object refactor

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">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#news" role="tab" aria-controls="News" aria-selected="true">News</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#athletics" role="tab" aria-controls="Athletics" aria-selected="false">Athletics</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="news" role="tabpanel" aria-labelledby="news-tab">
      <div class="row ocu-carousel">
        <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"><a href="#"></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"><a href="#"></a><span>FEBRUARY 8TH, 2019</span></div>
              <h3 class="carousel-text"><a href="#">4.0 Students Recognized in Chapel Service</a></h3>
              <p...

SCSS

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

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

.carousel-item {
  transition: 0.4s;
    &:nth-child(1) > div.carousel-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_1.jpg);}
    &:nth-child(2) > div.carousel-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_2.jpg);}
    &:nth-child(3) > div.carousel-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_3.jpg);}
    &:nth-child(4) > div.carousel-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_4.jpg);}

  div.carousel-image{
    background-repeat: no-repeat !important;
    background-size: cover  !important;
    background-position: center center !important;
    a {
      display:block;
      width:100%;
      height:100%;
      opacity:0;
    }
    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;
  }
}

li.thumbnail {
  &:nth-child(1) > div.thumbnail-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_1.jpg);}
  &:nth-child(2) > div.thumbnail-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_2.jpg);}
  &:nth-child(3) > div.thumbnail-image {background: url(http://dev.ohiochristian.edu/sites/default/files/news_3.jpg);}
  &:nth-child(4) > div.thumbnail-image {background:...

JavaScript

var controlsContainer = window.document.getElementById('outside-controls-container');
 var carouselButtons = controlsContainer.children[0].children;
 var carouselImages = window.document.getElementsByClassName('carousel-image');
 var carouselText = window.document.getElementsByClassName('carousel-text');
 var carouselTextH3 = window.document.querySelectorAll('H3.carousel-text');
 var carouselTextP = window.document.querySelectorAll('p.carousel-text');
 var thumbnailTextP = window.document.querySelectorAll('.thumbnail-text > p');
 var carouselInner = document.getElementsByClassName('carousel-inner');
 var thumbnails = window.document.getElementsByClassName('thumbnail');
 var carouselItems = document.getElementsByClassName('carousel-item');
 var marker = window.document.getElementById('thumbnail-marker');
 var carousel = window.document.querySelector('.carousel').Carousel;
 // the Ratio is used to determine the height vs width of the image
 var ratio = .7322;

 // Attahes the function called addEvents 
 thumbnails.addEvents = function() {
   // for each thumbnail, run add an event
   for (i = 0; i < this.length; i++) {
     // console.log(this[i]);
     // we want a click event that when clicked will run the function testMyClick
     // this in this case refers to the array of elements that have class="thumbnails"
     this[i].addEventListener('click', onThumbnailClickEvent);
   }
 };

 carouselItems.addEvents = function() {
   // for each thumbnail, run add an event
   for (i = 0; i < this.length; i++) {
     // console.log(this[i]);
     // we need to watch for changes to the carousel's auto-scroll event
     //this[i].addEventListener('transitionend', transitionEnd);
     //this[i].addEventListener('transitionstart', transitionStart);
   }
 }

 // this function runs everytime a thumbnail is clicked
 function onThumbnailClickEvent() {
   // if the current state of the slider is moving, ignore the click:
   if...