<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<style type="text/css">
*{ margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
width: 100%;
height: 50%;
}
.slides{
display: none;
transition: all;
}
.slides img{
width: 100%;
transition: 0.5s all ease;
}
.caption{
position: absolute;
font-size: 4vw;
width: 100%;
text-align: center;
bottom: 2px;
background-color: rgba(0,0,0,0.5);
color: white;
}
span.arrow{
top: 50%;
width: auto;
position: absolute;
font-size: 2vw;
padding: 8px 19px;
border-radius: 50%;
background-color: rgba(255,255,255,0.712);
cursor: pointer;
}
.next{
right: 10px;
}
.prev{
left: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="slides">
<img src="img/image5.jpg">
<div class="caption">caption text 1</div>
</div>
<div class="slides">
<img src="img/image6.jpg">
<div class="caption">caption text 2</div>
</div>
<div class="slides">
<img src="img/image7.jpg">
<div class="caption">caption text 3</div>
</div>
<div class="slides">
<img src="img/image8.jpg">
<div class="caption">caption text 4</div>
</div>
<span class="arrow prev" onclick="controller(-1)">❮</span>
<span class="arrow next" onclick="controller(1)">❯</span>
</div>
<script type="text/javascript">
let flag=1;
function controller(x){
flag=flag+x;
slideshow(flag);
}
slideshow(flag);
function slideshow(num){
let slides=document.getElementsByClassName('slides');
//console.log(slides);
if (num == slides.length) {
flag=0;
num=0;
}
if (num<0) {
flag=slides.length-1;
num=slides.length-1;
}
for (var y of slides) {
y.style.display="none";
}
slides[num].style.display='block'
}
</script>
</body>
</html>
Comments
Post a Comment