css image auto slideshow code example

Example: html auto slideshow

<html>
  <head>
    <style>
      #slider {
        width: 100%;
        height: 100%;

        margin: 0 auto;
        border: 10px solid transparent;
        padding: 0px;

        z-index: 100;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;
      }
      #slider > li {
        width: 100%;
        height: 100%;

        position: relative;
        display: inline-block;
        overflow: hidden;
        font-size: 15px;
        font-size: initial;
        line-height: normal;
        transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */
        background-size: cover;
        vertical-align: top;
        box-sizing: border-box;
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <ul id="slider">
      <li>
          <p>Some content.</p>
      </li>
      <li>
          <p>Some more content.</p>
      </li>
      <li>
        <p>And here's space for more.</p>
      </li>
    </ul>
    <script>
      // Slide every slideDelay seconds
      const slideDelay = 3000;

      const dynamicSlider = document.getElementById("slider");

      var curSlide = 0;
      window.setInterval(()=>{
        curSlide++;
        if (curSlide === dynamicSlider.childElementCount) {
          curSlide = 0;
        }

        // Actual slide
        dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%");
      }, slideDelay);

    </script>
  </body>
</html>

Tags:

Misc Example

Recent Posts