SO question

https://stackoverflow.com/questions/64106803/javascript-interfering-with-css-transition#comment113363126_64106803

by Luke Harby

HTML

<div class="slider">
  <div class="slider-items">
    <div class="item fade">
      <img src="/images/cs-slider-high.jpg" />
      <div class="caption">
        <p class="caption-text">COMING</p>
        <p class="caption-text">OKTOBER 10th</p>
      </div>
    </div>

    <div class="item fade">
      <img src="/images/building-slider.jpg" />
      <div class="caption">
        <p class="caption-text-2">Blackstoneroad 109<br>
        </p>
      </div>
    </div>
    <div class="item fade">
      <img src="/images/kontact-slider.jpg" />
      <div class="caption">
        <p class="caption-text-3">Coffee<br>Drinks<br>Food<br>& More</p>
      </div>
    </div>
    <div class="item fade">
      <img src="/images/seminar-slider.jpg" />
      <div class="caption">
        <p class="caption-text-3">Seminar Rooms<br>Inspiration<br>Shopping<br>& More</p>
      </div>
    </div>

  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<!-- The dots/circles -->
<div class="align-text-center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

CSS

.slider {
  width: 65%;
  max-width: 940px;
  height: 500px;
  border-radius: 0.25rem;
  position: relative;
  overflow: hidden;
}

.slider .left-slide,
.slider .right-slide {
  position: absolute;
  height: 40px;
  width: 40px;
  background-color: #444444;
  border-radius: 50%;
  color: #ffffff;
  font-size: 20px;
  top: 50%;
  cursor: pointer;
  margin-top: -20px;
  text-align: center;
  line-height: 40px;
}

.slider .left-slide:hover,
.slider .right-slide:hover {
  box-shadow: 0px 0px 10px black;
  background-color: #29a8e2;
}

.slider .left-slide {
  left: 30px;
}

.slider .right-slide {
  right: 30px;
}

.slider .slider-items .item img {
  width: 100%;
  height: 500px;
  display: block;
}

.slider .slider-items .item {
  visibility: hidden;
  opacity: 0;
  transition: 4s;
}

.slider .slider-items .item.active {
    opacity: 1;
    visibility: visible;
    transition: 4s;
}

.slider .slider-items .item .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.5);
}

JavaScript

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("item");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
  slides[slideIndex - 1].className += " active";
}

//automatic
var slideIndexAuto = 0;
showSlidesAuto();

function showSlidesAuto() {
  var i;
  var slides = document.getElementsByClassName("item");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
    
  }
  slideIndexAuto++;
  if (slideIndexAuto > slides.length) {
    slideIndexAuto = 1
  }
  slides[slideIndexAuto - 1].classList.add('active');
  setTimeout(showSlidesAuto, 4000);
}