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

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

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.