Fotoğraf Slider
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.slider-container {
width: 100%;
overflow: hidden;
}
.slider {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
flex: 0 0 auto;
}
img {
width: 100%;
vertical-align: middle;
}
/* Slider kontrolleri (opsiyonel) */
.slider-controls {
text-align: center;
margin-top: 10px;
}
.slider-control {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #bbb;
margin: 0 5px;
cursor: pointer;
}
.slider-control.active {
background-color: #333;
}
document.addEventListener("DOMContentLoaded", function() {
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const controls = document.querySelectorAll('.slider-control');
let currentIndex = 0;
const slideWidth = slides[0].clientWidth;
// Slider kontrollerine click eventi ekleme
controls.forEach(function(control, index) {
control.addEventListener('click', function() {
// Aktif slaytın indeksini güncelle
currentIndex = index;
slideTo(currentIndex);
updateControls(currentIndex);
});
});
function slideTo(index) {
slider.style.transform = `translateX(-${index * slideWidth}px)`;
}
function updateControls(index) {
// Aktif kontrolü güncelle
controls.forEach(function(control) {
control.classList.remove('active');
});
controls[index].classList.add('active');
}
// Otomatik slayt geçişi (opsiyonel)
setInterval(function() {
currentIndex = (currentIndex + 1) % slides.length;
slideTo(currentIndex);
updateControls(currentIndex);
}, 5000); // Her 5 saniyede bir slayt geçişi
});
