Create Image Slider in HTML CSS

 In this article, We will share tutorial How to Create Image Slider in HTML CSS. Here, we will create Image Slider using only HTML and CSS Also we will explain all you code of Our Image Slider. Here you will not learn to create a single image slider. Rather, You will learn to create many types of Image Slider.


Create Image Slider in HTML CSS 

After reading this article completely, you will be able to create a good Image Slider. Therefore, you should read the entire article. Learn how to make Image Slider. Also, the source code of the image slider will be copied from here and can be used anywhere. 


Image Slider Using Only HTML & CSS

HTML Code 

1
2
3
4
5
6
7
8
<div class="slider">
  <div class="slideshow-container slide">
    <img src="free1.png"/>
    
    <img src="free2.png"/>
    <img src="free3.png"/>
  </div>
</div>

CSS Code 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<style>
body{padding: 10px;}


/*slideshow styles*/

.slider {
  width: 625px;
  margin: 0 auto;
  overflow: hidden;
  border: solid 1px white;
}

.slideshow-container {
  width: 2500px;
  font-size: 0;
  transition: 1s ease;
  height: 225px;
}

.slideshow-container:hover {
  animation-play-state: paused;
}

img, .text-container {
  width: 625px;
  height: auto;
  display: inline-block;
  font-size: 16px;
  text-align: center;
}

.text-container {
  height: 225px;
  position: relative;
}


p {
  position: relative;
  top: -45%;
  padding: 5px;
}

.slide {
  animation: slide 20s ease infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  
  12.5% {
    transform: translateX(0%);
  }
  
  25% {
    transform: translateX(-25%);
  }
  
  37.5% {
    transform: translateX(-25%);
  }
  
  50% {
    transform: translateX(-50%);
  }
  
  100% {
    transform: translateX(0);
  }
  
  
</style>