<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
</head>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
main {
width : 60%;
height: 500px;
margin: auto;
margin-top: 100px;
box-shadow : 0px 0px 3px grey;
position: relative;
overflow: hidden; /*The images which were (100%,200% door) were overflow and now are hidden*/
}
.slide {
border : 5px solid red;
width : 100%;
height : 100%;
position: absolute;
transition: 1s;
}
</style>
<body>
<main>
<img src="cat1.jpg" alt="Avatar" class="slide" >
<img src="cat2.jpeg" alt="Avatar" class="slide" >
<img src="cat3.jpg" alt="Avatar" class="slide" >
</main>
<div class= "2buttons" id ="2buttons" style="font-size: xx-large; margin-top: 50px; text-align:center">
<button class = "addbtn" id = "addmybtn" onclick="GoPrev()">prev </button>
<button class = "addbtn" id = "reset" onclick="GoNext()" >next </button>
</div>
<script>
const slides = document.querySelectorAll(".slide")
var counter = 0;
console.log(slides); // 4 elements
slides.forEach( //
(slide,index) => { // slide = object of particular image
slide.style.left = `${index * 100}%`
//1st image 0 % door
//2nd image 100 % door
//3rd image 200 % door
}
)
function GoPrev(){
console.log("hye")
counter--;
slideImage()
}
function GoNext(){
console.log("hye")
counter++;
slideImage()
}
function slideImage() {
slides.forEach(
(slide) => {
slide.style.transform = `translateX(-${counter * 100}%)`
// translateX(-${0}%)
// translateX(-${100}%)
// translateX(-${200}%)
}
)
}
</script>
</body>
</html>
