slide-show/slideshow.css at master · plvigarg/slide-show · GitHub

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
slider{
  display: block;
  height:100%;
  width: 100%;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute;
}

slider > *{
  display:  block;
  height:100%;
  width:100%;
  animation: slide 24s infinite;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute;
}

slide:nth-child(1){
  left: 100%;
  animation-delay: 0s;
  background-image: url(img/1.jpg);
  background-size: cover;
  background-position: center;
}

slide:nth-child(2){
  left: 100%;
  animation-delay: 6s;
  background-image: url(img/2.jpg);
  background-size: cover;
  background-position: center;
}

slide:nth-child(3){
  left:100%;
  animation-delay: 12s;
  background-image: url(img/3.jpg);
  background-size: cover;
  background-position: center;
}

slide:nth-child(4){
  left: 100%;
  animation-delay: 18s;
  background-image: url(img/4.jpg);
  background-size: cover;
  background-position: center;
}

slide p{
  font-family:'Hammersmith One', sans-serif;
  text-align:center;
  display: inline-block;
  width: 100%;
  margin-top:300px;
  color:white;
  font-size: 50px;
}

@keyframes slide{
  0%{  left:100%}
  4.167%{ left:0%;}
  25%{ left:0%;}
  29.167%{ left:-100%}
  100%{ left:-100%}
}