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

Contents

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

Also Read This 👉 jquery Bootstrap Creating Tooltips 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.

automatic image slider in html

create the background of the slider.

CSS Code

Related posts: