Automatic Slideshow HTML + Fade Effects

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<header>
    <h1>SITE TITLE</h1>
  </header>

<div class="s-container fade-self">
      <div class="s-item">
        <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/superbike.jpg.webp" />
        <a href="#">Amazing Superbike Speed and Acceleration</a>
      </div>
      <div class="s-item">
        <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/motocross.jpg.webp" />
        <a href="#">The Most Amazing MotoCross in The Sky</a>
      </div>
      <div class="s-item">
        <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/p1.jpg.webp" />
        <a href="#">The World's Best and Fantastic Scenery</a>
      </div>
      <div class="s-item">
        <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/yellow.jpg.webp" />
        <a href="#">The Most Amazing Places In The World Full of Color</a>
      </div>
      <div class="s-item">
        <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/beverage.jpg.webp" />
        <a href="#">Best and Healthy Good Food and Beverage</a>
      </div>
    </div>
  
    
  
  </section>

<main>
    <h2>A Responsive & Automatic Slideshow</h2>
    <p>A Responsive & Automatic Slideshow with Fade Effect. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
  </main>

<h2>What is Lorem Ipsum?</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</body>
</html>

/* CSS Source Code */
.s-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 420px;
  margin: 20px auto;
}

.s-item {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition-property: opacity;
}

.s-item img {
  width: 100%;
  height: auto;
}

.s-item a {
  left: 20px;
  display: block;
  position: absolute;
  bottom: 20px;
  background: #151515;
  background: rgb(0 0 0 / 60%);
  font-size: 21px;
  color: #fff;
  padding: 5px 30px;
  font-weight: bold;
  z-index: 99;
  text-decoration: none;
}

.s-item a:hover {
  color: #3dff00;
}

.s-item:nth-of-type(1) {
  background: #69d2e7;
}

.s-item:nth-of-type(2) {
  background: #fa6900;
}

.s-item:nth-of-type(3) {
  background: #1fda9a;
}

.s-item:nth-of-type(4) {
  background: #e8b71a;
}

.s-item:nth-of-type(5) {
  background: #9b539c;
}

@media (max-width:800px) {
  .s-container {
    height: 400px
  }
}

@media (max-width:720px) {
  .s-container {
    height: 320px
  }

.s-item a {
    font-size: 19px
  }
}

@media (max-width:480px) {
  .s-container {
    height: 230px
  }

.s-item a {
    font-size: 18px
  }
}

// Javascript Source Code
(function(w, d) {
  "use strict";
  let options = {};
  let JSSlider = function() {};
  let changeProperty = function(items, index, prevIndex) {
    items[prevIndex].style.opacity = 0;
    items[index].style.opacity = 1;
  }
  let fade = function(container, items, index) {
    let prevIndex = (index === 0) ? items.length - 1 : index - 1;
    items[index].style.opacity = 1;
    setInterval(() => {
      prevIndex = index;
      index++;
      if (index > items.length - 1) {
        index = 0;
      }
      changeProperty(items, index, prevIndex);
    }, parseInt(options.timeInterval));
  }
  let chooseSlider = function(container, items, index) {
    if (options.animationType === 'fade' && options.type === 'auto') {
      fade(container, items, index);
    } else if (options.animationType === 'fade' && options.type === 'self') {
      fade(container, items, index);
    }
  }
  JSSlider.prototype.setLibrary = function(opt) {
    options = {
      container: opt.container || 's-container',
      items: opt.items || 's-item',
      transitionDuration: opt.transitionDuration || '300',
      transitionFunction: opt.transitionFunction || 'ease-in',
      timeInterval: opt.timeInterval || '5000',
      animationType: opt.animationType || 'fade',
      type: opt.type || 'auto',
      startAt: opt.startAt || 0
    }
    const containerDOM = d.getElementsByClassName(options.container)[0];
    const itemsDOM = Array.prototype.slice.call(containerDOM.getElementsByClassName(options.items));
    if (containerDOM && itemsDOM.length > 0) {
      itemsDOM.forEach(item => {
        item.style.transitionTimingFunction = options.transitionFunction;
        item.style.transitionDuration = `${options.transitionDuration}ms`;
      });
      if (options.startAt > itemsDOM.length - 1) {
        options.startAt = 0;
      }
      chooseSlider(containerDOM, itemsDOM, options.startAt);
    } else {
      console.error('Container or Items have been not found');
    }
  };
  JSSlider.prototype.startLibrary = function(opt) {
    d.addEventListener('DOMContentLoaded', function evt() {
      d.removeEventListener('DOMContentLoaded', evt, false);
      w.JSSlider.setLibrary(opt);
    }, false);
  }
  w.JSSlider = new JSSlider();
})(window, document);

(function() {
  "use strict";
  JSSlider.startLibrary({
    container: 'fade-self',
    timeInterval: '5000',
    type: 'self'
  });
})();

This is An Automatic Slideshow HTML with Fade Effects. Complete preview with syntax highlighting of html, css, js or javascript source code.