SIMPLE SLIDESHOW-5

1 / 5
SANTORINI-1
2 / 5
SANTORINI-2
3 / 5
KERKYRA-1
4 / 5
KERKYRA-2
5 / 5
KERKYRA-3
 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
<style>
* {box-sizing: border-box;}
body {background:#115599;font-family:Arial;}
.mySlides {display: none;}
img {vertical-align: middle;}
.slideshow-container {max-width: 100%;position: relative;margin:0;}
.text {background:rgba(0,0,0, 0.7);color:#FFF;font:16px arial;padding:8px;position:absolute;bottom:1px;width:auto;text-align: center;}
.numbertext {color: #FF0000;font-size: 12px;padding: 8px 12px;position: absolute;top: 0;}
.dot {height: 15px;width: 15px;margin: 0 2px;background-color: #FF0000;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;}
.active {background-color: #009900;}
.fade {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}
@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1}}
@keyframes fade {from {opacity: .4} to {opacity: 1}}
@media only screen and (max-width: 300px) {.text {font-size: 11px}}
</style>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="https://i.imgur.com/phbIVY1.jpg" style="width:100%">
<div class="text">SANTORINI-1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="https://i.imgur.com/Jrw6vMy.jpg" style="width:100%">
<div class="text">SANTORINI-2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="https://i.imgur.com/KGh0xkb.jpg" style="width:100%">
<div class="text">KERKYRA-1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="https://i.imgur.com/OWulAvD.jpg" style="width:100%">
<div class="text">KERKYRA-2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="https://i.imgur.com/KX8ScuV.jpg" style="width:100%">
<div class="text">KERKYRA-3</div>
</div>
</div>
<div style="text-align:center">
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span> 
<span class="dot"></span>   
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";}
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" active", "");}
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 3000);}
</script>