Я написал этот код для слайдера изображений, но я не знаю, как сделать скользящую анимацию при смене фотографий кидают
Итак, если кто-нибудь может помочь, я был бы признателен.
html: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<!-- CSS -->
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="container">
<img id="first" class="slide" src="https://upload.wikimedia.org/wikipedia/commons/c/ca/Fiat_127_2_v_sst.jpg" alt="">
<img class="slide" src="https://trustspringer.com/wp-content/uploads/2019/07/house-mouse-1.jpg" alt="">
<img class="slide" src="https://www.dw.com/image/40734768_303.jpg" alt="">
<img class="slide" src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png" alt="">
<button id="prev">prev</button>
<button id="next">next</button>
</div>
<!-- JavaScript -->
<script src="index.js"></script>
css: -
img{
width: 60%;
margin-left: 20%;
height: 50vh;
display: none;
}
#first{
display: block;
}
javascript: -
var images = document.querySelectorAll(".slide"),
prev = document.getElementById("prev"),
next = document.getElementById("next"),
count = 0;
next.addEventListener("click", function() {
images[count].style.display = "none";
if(count >= images.length - 1) {
count = 0;
} else {
count ++;
}
images[count].style.display = "block";
});
prev.addEventListener("click", function() {
images[count].style.display = "none";
if(count <= 0) {
count = images.length - 1;
} else {
count --;
}
images[count].style.display = "block";
});
........ .............................................. .... .................................................. .................................................. .... .............................................. ........ .......................................... ............ ...................................... ................ .................................. ....................
Спасибо