Javascriptteki setInterval fonksiyonu yardımıyla her 4 saniyede bir revize ettiğim controlIndex fonksiyonu a = 1 ve clicked = false parametreleriyle çalışıyor. Sonuç olarak 4 saniyede bir sonraki slide gözüküyor.
Eğer kullanıcı tıklama işlemi yapmamışsa interval fonksiyonumuz çalışmaya devam ediyor. Fakat tıklama işlemi yapıldığında interval fonksiyonumuz clearlanıyor ve tekrar başlatılıyor.
var slideItem = document.getElementsByClassName('slideItem');
var slideIndex = 1;
slideControl(slideIndex);
var interval = setInterval(function(){ // xxx
controlIndex(1, false); // xxx
}, 4000); // xxx
function controlIndex(a, clicked = true) { // xxx
if(clicked){ // xxx
clearInterval(interval); // xxx
interval = setInterval(function(){ // xxx
controlIndex(1); // xxx
}, 4000); // xxx
} // xxx
slideIndex += a;
slideControl(slideIndex);
}
// gerisi senin kodunla aynı
( Eklediğim kısımlar belli olsun diye xxx yorumlarıyla belirttim. )
Öncelikle karşılaştığın sorunun neye dayandığını belirtmek isterim.
Hata 1) Overlay'i display block ile görünür kılmak istersen opacity sinden yararlanamazsın.
Hata 2) Overlay display block olduğunda img nin üzerine çıktığından artık img ye hover olmamış olunur ve sonsuz bir döngü başlar. ( tabi ::hover değerini img ye uyguladıysan )
Aşağıda çalışır bir örnek mevcut, iyi çalışmalar.
<div class="image-with-overlay">
<div class="overlay"></div>
<img src="https://picsum.photos/300/300" alt="Overlay image" widht="300" height="300">
</div>
.image-with-overlay {
position: relative;
width: 300px;
height: 300px;
}
.image-with-overlay .overlay {
position: absolute;
width: 100%;
height: 100%;
background: #0c0c0c;
opacity: 0;
transition: .5s opacity;
}
.image-with-overlay:hover .overlay {
opacity: .6;
}
Aslında bir şey yapmana gerek yok html de böyle yönlendirme yapabiliyorsun zaten
<a href="#target">Hedefe git</a>
// Bişeyler..
<section id="target">
<h1>Target</h1>
<p>Target burası</p>
</section>
Daha yumuşak geçiş istersen html { scroll-behavior: smooth } ekle.
Detay için
Hatta çok daha iyisi Tayfun Abi'nin Javascript Form Kontrolü + CSS ile Kolay Yöntemi videosunu izlemeni tavsiye ederim. Tabi buradaki kontroller UX açısından yararlı olsa da kullanıcılar tarafından erişebilir durumda, dolayısıyla değiştirilerek bu kontroller atlanabilir. Bu yüzden backend kontrolünü de yapmayı unutma.
HTML'de input elemanına ekleyebildiğimiz onkeyup property si yardımıyla klavyeden her tuş girildiğinde kontrol fonksiyonumuzu çağırabiliriz.
Şöyle ki;
<input type="password" name="pass1" onkeyup="passControl()">
<input type="password" name="pass2" onkeyup="passControl()">
<span class="password-warning"></span>
function passControl() {
let pass1 = document.querySelector('[name="pass1"]');
let pass2 = document.querySelector('[name="pass2"]');
let warningText = document.querySelector(".password-warning");
if(pass1.value != pass2.value){
warningText.innerHTML = "Şifreler Uyuşmuyor!";
}else {
warningText.innerHTML = "";
}
}
Eğer istersen kontrol sonucu istenilen sonuç sağlanmıyorsa submit butonunu da devre dışı bırakabilirsin.
Programdan kastettiğin C# ile yazdığın bir console programı ise kodunun sonuna
Console.ReadLine();
ekleyerek kullanıcıdan bir veri girmesini bekleyebilirsin, böylelikle ekranda kalacaktır.
Ya da programı çalıştırırken Debug mod (F5) değil de normal mod (CTRL+F5) ile çalıştırmayı dene.
Ha programdan kastın Visual Studio nun kendisi ise Silip tekrar yüklemeyi dene demekten başka aklıma birşey gelmiyor maalesef.
Benim kullandığım birkaç eklenti (kişiselleştirme eklentileri de dahil)
Php bilmiyorum ama backslash backslashdır :)
$ad ın önüne backslash koymayı dene
Kod içerisindeki player.pause(); satırında hata meydana geldiğinden o bloktaki sonraki satırlar işleme alınmıyor yani data-state değeri pause olarak atanamıyor. Bu durumda data-state değeri her zaman play olarak kalıyor yani else bloğu (durdurma tıklaması) çalışmıyor. O satırda hata vermesinin sebebi ise player diye bir değişkenin olmaması. O satırı komple silerseniz sorun ortadan kalkacaktır.
Parent ına opacity uygulanan bir elemanı o opacity den mahrum bırakamıyoruz maalesef. Child eleman maksimum opacity: 1 alacağından en fazla kapsayıcısının gösterebildiğini gösterebilir.
Alternatif çözüm yolları denemelisin. Örneğin yukarıda attığım gibi bir overlay oluşturup bu overlayi senin de dediğin gibi z-index ve position yardımıyla tüm nesnelerin üzerine getir. Ovarlay in de üzerinde olmasını istediğin elemana da overlayden daha yüksek bir z-index değeri ver. Arka planda oluşmasını istedğin efekti ovarlay e uygularsan istediğine yakın bir sonuç elde edebilirsin. Örneğin siyahın .1 i kadar karartabilir veya biraz blur ekleyebilirsin.
Ama diyorsan ki ben sadece opacity düşürmek istiyorum, o halde dropmenu yu opacity uyguladığın parentten çıkarmalısın ki bu durumda body den çıkaramazsın. O halde body nin içerisindeki elemanları bir div içerisine topla drop menuyu de divin dışarısına çıkar ve opacity i elemanları topladığın div e uygula fakat böyle de drop menüyü konumlandırmada sıkıntı yaşayabilirsin.
<body>
<div class="arkadaKalacak">
<!-- Tüm sayfa içeriği -->
</div>
<div id="dropmenu2">Menu</div>
</body>