Auto Image Slider in HTML Source Code

This HTML source code helps you to create an auto image slider. The image slider uses JavaScript setInterval function to automatically slide the next image in a loop. Besides this, it also provides next/previous buttons and dots navigation to slide the images with fading effect.

It is based on a simple idea to animate the images with CSS keyframes and radio inputs to slide the images. It uses a minimal JavaScript function to activate the next/prev buttons. Moreover, the slider uses CSS media queries to adjust the size of the slider container for small screens. You can integrate this image slider for lightweight projects.

How to Integrate HTML Source Code for Auto Image Slider

First of all, create the radio input (with a unique id) according to the number of images that you want to add inside the slider. Similarly, add your images and define the two label tags (for next and previous buttons) just after each image as follows:

<div class="container">	
	<input type="radio" id="i1" name="images" checked/>
	<input type="radio" id="i2" name="images" />
	<input type="radio" id="i3" name="images" />
	<input type="radio" id="i4" name="images"  />
	<div class="slide_img" id="one">			
		<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
			<label class="prev" for="i4"><span></span></label>
			<label class="next" for="i2"><span></span></label>	
		
	</div>
	
	<div class="slide_img" id="two">
		
			<img src="https://preview.ibb.co/e5OShF/cropped_800_480_111290.jpg " >
				<label class="prev" for="i1"><span></span></label>
				<label class="next" for="i3"><span></span></label>
		
	</div>
			
	<div class="slide_img" id="three">
			<img src="http://wallpaperswide.com/download/up_house-wallpaper-1280x800.jpg">	
				<label class="prev" for="i2"><span></span></label>
				<label class="next" for="i4"><span></span></label>
	</div>


	<div class="slide_img" id="four">
			<img src="http://www.wallpapereast.com/static/images/toys-wallpaper-hd-16339-17046-hd-wallpapers.jpg">	
			
				<label class="prev" for="i3"><span></span></label>
				<label class="next" for="i1"><span></span></label>

	</div>

	<div id="nav_slide">
		<label for="i1" class="dots" id="dot1"></label>
		<label for="i2" class="dots" id="dot2"></label>
		<label for="i3" class="dots" id="dot3"></label>
		<label for="i4" class="dots" id="dot4"></label>
	</div>
		
</div>


<div class="yt">
	<a href='https://www.youtube.com/watch?v=z74ExMz-cWU' target="_blank"> See Video
</a>
</div>

Now, style the image slider using the following CSS styles. You can change the CSS rules in order to customize the image slider according to your needs.

@import url("https://fonts.googleapis.com/css?family=Just+Another+Hand");
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "Just Another Hand", cursive;
  overflow-X: hidden;
}

.container {
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  width: 70%;
  height: 0;
  padding-bottom: 40%;
  user-select: none;
  background-color: #1c1c1c;
  box-shadow: 0 11px 22px rgba(0, 0, 0, 0.2), 0 7px 7px rgba(0, 0, 0, 0.24);
}
.container input {
  display: none;
}
.container .slide_img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.container .slide_img img {
  width: inherit;
  height: inherit;
}
.container .slide_img .prev, .container .slide_img .next {
  width: 12%;
  height: inherit;
  position: absolute;
  top: 0;
  background-color: rgba(255, 82, 82, 0.2);
  z-index: 99;
  transition: 0.45s;
  cursor: pointer;
  text-align: center;
}
.container .slide_img .next {
  right: 0;
}
.container .slide_img .prev {
  left: 0;
}
.container .slide_img .prev:hover, .container .slide_img .next:hover {
  transition: 0.3s;
  background-color: rgba(255, 82, 82, 0.8);
}
.container .slide_img .prev span, .container .slide_img .next span {
  position: absolute;
  width: 0px;
  height: 0px;
  border: solid 20px;
  top: 50%;
  transform: translateY(-50%);
}
.container .slide_img .prev span {
  border-color: transparent #fff transparent transparent;
  right: 35%;
}
.container .slide_img .next span {
  border-color: transparent transparent transparent #fff;
  left: 35%;
}
.container #nav_slide {
  width: 100%;
  bottom: 12%;
  height: 11px;
  position: absolute;
  text-align: center;
  z-index: 99;
  cursor: default;
}
.container #nav_slide .dots {
  top: -5px;
  width: 18px;
  height: 18px;
  margin: 0 3px;
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
  transition: 0.4s;
  cursor: pointer;
}
.container #nav_slide #dot1:hover {
  background: #795548;
}
.container #nav_slide #dot2:hover {
  background: #F44336;
}
.container #nav_slide #dot3:hover {
  background: #2196F3;
}
.container #nav_slide #dot4:hover {
  background: #4CAF50;
}

#i1:checked ~ #one,
#i2:checked ~ #two,
#i3:checked ~ #three,
#i4:checked ~ #four {
  z-index: 9;
  animation: scroll 1s ease-in-out;
}

#i1:checked ~ #nav_slide #dot1 {
  background: #795548;
}

#i2:checked ~ #nav_slide #dot2 {
  background: #F44336;
}

#i3:checked ~ #nav_slide #dot3 {
  background: #2196F3;
}

#i4:checked ~ #nav_slide #dot4 {
  background: #4CAF50;
}

@keyframes scroll {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 685px) {
  .container {
    border: none;
    width: 100%;
    height: 0;
    padding-bottom: 55%;
  }
  .container .slide_img .prev, .container .slide_img .next {
    width: 15%;
  }
  .container .slide_img .prev span, .container .slide_img .next span {
    border: solid 12px;
  }
  .container .slide_img .prev span {
    border-color: transparent #fff transparent transparent;
  }
  .container .slide_img .next span {
    border-color: transparent transparent transparent #fff;
  }
  .container #nav_slide .dots {
    width: 12px;
    height: 12px;
  }
}
.yt {
  margin: 0 auto;
  margin-top: 30px;
  width: 80px;
  height: 40px;
  border-radius: 4px;
  text-align: center;
  background: #2196F3;
  box-shadow: 0 11px 22px rgba(0, 0, 0, 0.2), 0 7px 7px rgba(0, 0, 0, 0.24);
  transition: 0.4s;
  opacity: 0.4;
}
.yt a {
  position: relative;
  text-decoration: none;
  color: #fff;
  font-size: 23px;
  top: 4px;
}

.yt:hover {
  transition: 0.3s;
  box-shadow: none;
  opacity: 0.8;
}

Finally, add the following JavaScript function for its function:

onload  = start;

function start(){	
var i = 1;
function Move(){ 	
	i = (i%4)+1; // 4 is the Number of image in slider
	document.getElementById('i'+i).checked = true;
}
setInterval(Move,3000); //change img in 3 sec
}

That’s all! hopefully, you have successfully integrated code to create an auto image slider. If you have any questions or suggestions, feel free to comment below.