Merhabalar. İdeasoft alt yapılı web sitem var. Bir sayfaya slider yapmaya çalışıyorum fakat resimler gözükmüyor.

kod:
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.slider {
position: relative;
max-width: 800px;
margin: auto;
overflow: hidden;
}

.slides {
display: flex;
transition: transform 0.5s ease;
}

.slide {
min-width: 100%;
box-sizing: border-box;
}

img {
width: 100%;
display: block;
}

button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.8);
border: none;
cursor: pointer;
padding: 10px;
}

.prev {
left: 10px;
}

.next {
right: 10px;
}
</style>
<div class="slider">
<div class="slides">
<div class="slide"><img src="C:UsersVOLKANDownloadsSALONgg.jpeg" alt="Resim 1" /></div>
<div class="slide"><img src="C:UsersVOLKANDownloadsSALONff.jpeg" alt="Resim 2" /></div>
<div class="slide"><img src="C:UsersVOLKANDownloadsSALONdd.jpeg" alt="Resim 3" /></div>
</div>
<button class="prev" onclick="changeSlide(-1)">❮</button> <button class="next" onclick="changeSlide(1)">❯</button></div>
<script>
let currentSlide = 0;

function showSlide(index) {
const slides = document.querySelectorAll('.slide');
if (index >= slides.length) {
currentSlide = 0;
} else if (index < 0) {
currentSlide = slides.length - 1;
} else {
currentSlide = index;
}
const offset = -currentSlide * 100;
document.querySelector('.slides').style.transform = `translateX(${offset}%)`;
}

function changeSlide(step) {
showSlide(currentSlide + step);
}

// Otomatik geçiş
setInterval(() => {
showSlide(currentSlide + 1);
}, 3000);
</script>