image slider javascript
html file:
<!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>Document</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="container">
<img src="images/img1.jpg" alt="" class="slides">
<img src="images/img2.jpg" alt="" class="slides">
<img src="images/img3.jpg" alt="" class="slides">
<img src="images/img4.jpg" alt="" class="slides">
</div>
<script src="script/slider.js"></script>
<a class="prev" onclick="goprev()">❮</a>
<a class="next" onclick="gonext()">❯</a>
</body>
</html>
css file:
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container{
width: 70%;
margin: 50px auto;
border: 1px solid gray;
height: 200px;
position: relative;
/* */
overflow: hidden;
}
.slides{
position: absolute;
transition: 1s;
}
img{
height: 100%;
width: 100%;
}
.prev{
position: absolute;
top: 45vh;
left: 10vw;
user-select: none;
width: auto;
padding: 10px;
}
.next{
position: absolute;
right: 10vw;
top: 45vh;
user-select: none;
width: auto;
padding: 10px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
js file:
const slides=document.querySelectorAll('.slides');
let counter=0;
console.log(slides);
slides.forEach(
(item,index)=>{
item.style.left=`${index*100}%`
}
)
const goprev=()=>{
// alert('prev click');
counter--;
// console.log(counter);
slideImage();
}
const gonext=()=>{
//alert('next click');
counter++;
// console.log(counter);
slideImage();
}
/*slide image*/
const slideImage=()=>{
slides.forEach((item)=>{
// console.log(counter);
if(counter>=4){
counter=4;
}
else{
item.style.transform=`translateX(-${counter*100}%)`;
console.log(counter);
}
})
}
Comments
Post a Comment