title: I'm trying to build a testimony slider with a fade out transition when switching from one testimony to the next using opacity
body: <p>The slider works fine; the testimonial changes with a click of the left or right chevron arrow buttons. But I want to make it so that when I click the right or left arrow, it does a fade-out into a fade-in transition into the next testimonial by means of opacity. As you can see that is what I attempted to do on the second script, but it didn't work. I'm not sure why it is not working, any help would be appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.testimonial {
    position: relative;
    top: 0px;
    max-width: 800px;
    max-height: 800px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    text-align: center;
    line-height: 2;
  }
  
  .testimonial span {
    font-weight: 500;
    font-size: 25px;
    color: #fff;
  }
  
  .testimonial q {
    font-size: 22px;
    color: #fff;
  }
  
  .testimonial img {
    padding-right: 10px;
    padding-left: 10px;
    width: 100px;
    border-radius: 50%;
  }
  
  .left {
    position: absolute;
    cursor: pointer;
    bottom: 120px;
    right: 370px;
    width: 30px;
    height: 30px;
  }
  
  .right {
    cursor: pointer;
    position: absolute;
    width: 30px;
    height: 30px;
    bottom: 120px;
    left: 370px;
  }
  
  .testimonials h1 {
    position: relative;
    font-size: 35px;
    text-align: center;
    top: 90px;
    color: #fff;
  }
  
  .testimonials {
    position: relative;
    background-image: url('https://get.wallhere.com/photo/nature-mountain-top-Mount-Everest-landscape-1420401.jpg');
    background-size: cover;
    font-size: 10px;
    color: #000;
  }
  
  .testimonials::before {
    content: "";
    background-image: linear-gradient(35deg, darkgrey, darkslategrey);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.8;
  }
  
  .testimonialImg img {
    position: relative;
    text-align: center;
    max-width: 140px;
    top: 0px;
    left: 160px;
  }
  
  .testimonialImg h1 {
    position: relative;
    top: 0px;
  }
  
  .chevron img {
    filter: invert(1);
  }
  
  .testimonial4 img {
    background: white;
    border-radius: 50%;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .testimonial1 img {
    padding: 0px;
    background: white;
    border-radius: 50%;
  }
  
  .testimonial3 img {
    padding: 0px;
  }
  
  .testimonial2 img {
    padding: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="testimonials"&gt;
      &lt;div class="testimonialImg"&gt;
        &lt;h1&gt;Testimonials&lt;/h1&gt;
        &lt;img src="https://www.clker.com/cliparts/H/d/M/E/8/M/white-underline-hi.png"&gt;
      &lt;/div&gt;
      &lt;div class="testimonial testimonial1"&gt;
        &lt;img src="https://i.pinimg.com/originals/a1/c9/af/a1c9af575b575995647b6deeb431387a.jpg"&gt;&lt;br&gt;
        &lt;span&gt;Albert Einstein&lt;/span&gt; &lt;br&gt;
        &lt;q&gt;We cannot solve our problems with the same thinking we used when we created them.&lt;/q&gt;
      &lt;/div&gt;
      &lt;div class="testimonial testimonial2"&gt;
        &lt;img src="https://i.pinimg.com/236x/56/e3/8f/56e38fe68b8b26d9ecf6bee9850a524e--nelson-mandela-line-drawings.jpg"&gt;&lt;br&gt;
        &lt;span&gt;Nelson Mandela&lt;/span&gt; &lt;br&gt;
        &lt;q&gt;I learned that courage was not the absence of fear, but the triumph over it. The brave man is not he who does not feel afraid, but he who conquers that fear.&lt;/q&gt;
      &lt;/div&gt;
      &lt;div class="testimonial testimonial3"&gt;
        &lt;img src="https://www.prosportstickers.com/product_images/g/abe_lincoln_decal__43877.jpg"&gt; &lt;br&gt;
        &lt;span&gt;Abraham Lincoln&lt;/span&gt; &lt;br&gt;
        &lt;q&gt;You cannot escape the responsibility of tomorrow by evading it today.&lt;/q&gt;
      &lt;/div&gt;
      &lt;div class="testimonial testimonial4"&gt;
        &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Martin_Luther_King%2C_Jr_.svg/860px-Martin_Luther_King%2C_Jr_.svg.png"&gt;&lt;br&gt;
        &lt;span&gt;Martin Luther King Jr&lt;/span&gt; &lt;br&gt;
        &lt;q&gt;Faith is taking the first step even when you don't see the whole staircase.&lt;/q&gt;
      &lt;/div&gt;
      &lt;div class="chevron"&gt;
        &lt;img src="https://pp.netclipart.com/pp/s/336-3364252_rounded-arrow-png-rounded-left-arrow-icon.png" class="left" onclick="nextSlide(-1);" onclick="navClickTransition(0);"&gt;
        &lt;img src="https://n6-img-fp.akamaized.net/free-icon/right-black-arrow_318-33109.jpg?size=338c&amp;ext=jpg" class="right" onclick="nextSlide(1);" ; onclick="navClickTransition(0);"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript"&gt;
      var slide_index = 1;
      displaySlides(slide_index);
  
      function nextSlide(n) {
        displaySlides(slide_index += n);
      }
  
      function currentSlide(n) {
        displaySlides(slide_index = n);
      }
  
      function displaySlides(n) {
        var i;
        var slides = document.getElementsByClassName("testimonial");
        if (n &gt; slides.length) {
          slide_index = 1
        }
        if (n &lt; 1) {
          slide_index = slides.length
        }
        for (i = 0; i &lt; slides.length; i++) {
          slides[i].style.display = "none";
        }
        slides[slide_index - 1].style.display = "block";
      }
    &lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      function navClickTransition() {
        const navClick = document.getElementsByClassName("testimonial");
        navClick.style.opacity = 1;
      }
    &lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>