WHAT'S NEW?
Loading...

Automatic Image Slider in HTML/CSS and JavaScript

October 26, 2019 , , , ,
Image sliders are the most attractive part of any website. This is an example of automatic image slider. In which images will changed automatically after 2 second, as your wise you can change the timing of slide. It is designed in HTML/CSS and JavaScript code. Which looks like as bellow. 
CSS 

1
2
3
4
5
6
7
8
9
.mySlides{
 display:none; 
 width: 400px; 
 height: 300px;
}
.maindiv{
 text-align: center; 
 max-width:500px
}

HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html> 
<html> 
<head> 
   <title> Automatic Image Slider </title> 
</head> 
<body> 
 <h2 class="maindiv">Automatic Slideshow</h2>
<div class="maindiv">
  <img class="mySlides" src="image_1.jpg" style="width:100%">
  <img class="mySlides" src="image_2.jpg" style="width:100%">
  <img class="mySlides" src="image_4.jpg" style="width:100%">
  <img class="mySlides" src="image_5.jpg" style="width:100%">
  <img class="mySlides" src="image_6.jpg" style="width:100%">
  <img class="mySlides" src="image_7.jpg" style="width:100%">
  <img class="mySlides" src="image_8.jpg" style="width:100%">
  <img class="mySlides" src="image_9.jpg" style="width:100%">
</div>

</body> 
</html>

JavaScript 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 2000); // Change image every 2 seconds
}

Try This amazing Image Slider  !!

Circular Image Slider (HTML/CSS & JavaScript)

 



0 comments:

Post a Comment

Follow:

Shared by Way Templates