Merhaba,
Html, css ve javascriprt kullanarak basit bir image slider oluşturdum. Slider doğru çalışıyor, autoslide özelliği de mevcut fakat şöyle bir sorun var..
Sliderda yer alan butonlar ile auto slide doğru çalışmıyor. Örneğin ben 2.5 saniyede bir oto geçiş verdiğimde, butona da tıklama yaparsam arada 1 slide atlıyor her 2.5 saniyede bir.
Olması gereken butonlar kullanıldığında auto slide özelliğinin durması, kullanılmadığı anlarda ise çalışması.
kodumun tamamı şöyle;
Yardımlarınız için şimdiden teşekkürler :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div class="slides fade">
<div class="numbers">1 / 4</div>
<div><img class="" src="slider/1.jpg"></div>
<div class="caption">Text 1</div>
</div>
<div class="slides fade">
<div class="numbers">2 / 4</div>
<div><img class="" src="slider/2.jpg"></div>
<div class="caption">Text 1</div>
</div>
<div class="slides fade">
<div class="numbers">3 / 4</div>
<div><img class="" src="slider/3.jpg"></div>
<div class="caption">Text 1</div>
</div>
<div class="slides fade">
<div class="numbers">4 / 4</div>
<div><img class="" src="slider/4.jpg"></div>
<div class="caption">Text 1</div>
</div>
<button class="btn" id="btn1">❮</button>
<button class="btn" id="btn2">❯</button>
</div>
<br>
<div style="text-align:center">
<span class="dots"></span>
<span class="dots"></span>
<span class="dots"></span>
<span class="dots"></span>
</div>
</body>
<script>
var index=1;
function plusIndex(n) {
index=index+n;
showImage(index);
}
function currentSlide(n) {
showImage(index = n);
}
showImage(1);
function showImage(n) {
var i;
var x = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dots");
if (n > x.length) {index = 1};
if (n < 1) {index = x.length};
for ( i = 0;i < x.length; i++)
{
x.style.display = "none";
}
for (i=0;i<dots.length;i++) {
dots.className = dots.className.replace(" active","");};
x[index-1].style.display = "block";
dots[index-1].className += " active";
}
autoSlide();
function autoSlide() {
var i;
var x = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dots");
for (i=0;i<dots.length;i++) {
dots.className = dots.className.replace(" active","");
}
dots[index-1].className += " active";
for ( i = 0;i < x.length; i++)
{
x.style.display = "none";
}
if (index> x.length) {index=1}
x[index-1].style.display = "block";
index++;
if (index>x.length) {
index=1
}
setTimeout(autoSlide,3000);
}
</script>
</html>