automatic image slider in html – How To Create a Slideshow?

automatic image slider in html – Image Slider – With Auto-Play & Manual Navigation Buttons – Using CSS, HTML & Javascript Example with demo.

automatic image slider in html

Automatic Image Slider in Html, CSS and Javascript. To copy-paste the following code of the automatic image slider step by step.

create the background of the slider.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Image Slider - www.pakainfo.com</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>


    <div class="dynamicsld">
      <div class="sectionspart">

        <input type="radio" name="sld-btn" id="sld1">
        <input type="radio" name="sld-btn" id="sld2">
        <input type="radio" name="sld-btn" id="sld3">
        <input type="radio" name="sld-btn" id="sld4">

        <div class="slide first">
          <img src="welcome.jpg" alt="">
        </div>
        <div class="slide">
          <img src="pakainfo.jpg" alt="">
        </div>
        <div class="slide">
          <img src="infinityknow.jpg" alt="">
        </div>
        <div class="slide">
          <img src="example.jpg" alt="">
        </div>

        <div class="navigation-auto">
          <div class="auto-btn1"></div>
          <div class="auto-btn2"></div>
          <div class="auto-btn3"></div>
          <div class="auto-btn4"></div>
        </div>

      </div>

      <div class="navigation-manual">
        <label for="sld1" class="manual-btn"></label>
        <label for="sld2" class="manual-btn"></label>
        <label for="sld3" class="manual-btn"></label>
        <label for="sld4" class="manual-btn"></label>
      </div>

    </div>


    <script type="text/javascript">
    var counter = 1;
    setInterval(function(){
      document.getElementById('sld' + counter).checked = true;
      counter++;
      if(counter > 4){
        counter = 1;
      }
    }, 5000);
    </script>

  </body>
</html>
      

CSS Code

style.css

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #23E3C9;
}

.dynamicsld{
  width: 800px;
  height: 500px;
  border-radius: 10px;
  overflow: hidden;
}

.sectionspart{
  width: 500%;
  height: 500px;
  display: flex;
}

.sectionspart input{
  display: none;
}

.slide{
  width: 20%;
  transition: 2s;
}

.slide img{
  width: 800px;
  height: 500px;
}

/*css for manual slide navigation*/

.navigation-manual{
  position: absolute;
  width: 800px;
  margin-top: -40px;
  display: flex;
  justify-content: center;
}

.manual-btn{
  border: 2px solid #40D3DC;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child){
  margin-right: 40px;
}

.manual-btn:hover{
  background: #40D3DC;
}

#sld1:checked ~ .first{
  margin-left: 0;
}

#sld2:checked ~ .first{
  margin-left: -20%;
}

#sld3:checked ~ .first{
  margin-left: -40%;
}

#sld4:checked ~ .first{
  margin-left: -60%;
}

/*css for automatic navigation*/

.navigation-auto{
  position: absolute;
  display: flex;
  width: 800px;
  justify-content: center;
  margin-top: 460px;
}

.navigation-auto div{
  border: 2px solid #40D3DC;
  padding: 5px;
  border-radius: 10px;
  transition: 1s;
}

.navigation-auto div:not(:last-child){
  margin-right: 40px;
}

#sld1:checked ~ .navigation-auto .auto-btn1{
  background: #40D3DC;
}

#sld2:checked ~ .navigation-auto .auto-btn2{
  background: #40D3DC;
}

#sld3:checked ~ .navigation-auto .auto-btn3{
  background: #40D3DC;
}

#sld4:checked ~ .navigation-auto .auto-btn4{
  background: #40D3DC;
}
      

php slideshow

Read Also:  Simple Angular Hello World Example

I hope you get an idea about automatic image slider in html.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.