<div class="container">
  <div class="row">
    <div class="col">
      <div js-easy-slides slider-delay-time='4' class="d-flex justify-content-center customslideshow-container padding-top-lg">
          <img src="https://soliloquywp.com/wp-content/uploads/2013/01/idea-750x300_c.jpg" class="img-responsive" alt="Image 1">
          <img src="https://soliloquywp.com/wp-content/uploads/2014/04/mushrooms-548360_1280-750x300_c.jpg" class="img-responsive" alt="Image 2">

          <img src="https://soliloquywp.com/wp-content/uploads/2014/04/bananas-504478_1280-750x300_c.jpg" class="img-responsive" alt="Image 3">
        </div>
    </div>
  </div>
</div>

[js-easy-slides] img {
    opacity: 0;
    position: absolute;
    transition: .5s opacity ease-in-out;
}

[js-easy-slides] img[active] {
    opacity: 1;
}

.padding-top-lg {
  padding-top: 25px;
}

(function() {
  var sliderWrappers = document.querySelectorAll("[js-easy-slides]");
  
  sliderWrappers.forEach(function(item) {
    var timeStamp = item.getAttribute("slider-delay-time") * 1000 || 3000;

    var imgList = item.querySelectorAll("img");

    if (imgList.length === 1) {
      return;
    }

    imgList[0].setAttribute("active", "");

    var index = 1;

    setInterval(function() {
      Array.from(imgList)
        .filter(function(element) {
        return element.hasAttribute("active");
      })
        .forEach(function(element) {
        element.removeAttribute("active");
      });

      imgList[index].setAttribute("active", "");

      if (index === imgList.length - 1) {
        index = 0;
      } else {
        index++;
      }
    }, timeStamp);
  });
})();