JAVASCRIPT BASİT SLIDER

Bu makalede, JavaScript kullanarak basit bir responsive slider uygulaması oluşturmayı öğreneceğiz. Bu uygulama, ileri ve geri ok tuşları ile resimler arasında geçiş yapmamızı sağlar. Aynı zamanda, butonlar sayesinde doğrudan istenen resme geçiş yapılabilir..

UYGULAMANIN GENEL YAPISI

Uygulama HTML, CSS ve JavaScript kullanılarak oluşturulmuştur:

• HTML: Resimleri, butonları ve navigasyon oklarını içeren temel yapıyı oluşturur.

• CSS: Sayfanın tasarımını düzenler ve kullanıcı deneyimini iyileştirir.

• JavaScript: Resimleri değiştirmek için olay dinleyicileri ve işlevler içerir.

HTML YAPISI

Uygulamanın temel iskeleti HTML ile oluşturulmuştur. İşte HTML kodlarının açıklaması:

<div class="container">
    <div class="resimler">
        <img src="resim1.png">
        <img src="resim2.png">
        <img src="resim3.png">
        <span class="prev">  < </span>
        <span class="next">  > </span>
    </div>

    <div class="butonlar">
        <button id="buton1" > RESİM 1 </button>
        <button id="buton2" > RESİM 2 </button>
        <button id="buton3" > RESİM 3 </button>
    </div>
</div>

Burada, .resimler sınıfı içinde 3 farklı resim bulunuyor. Kullanıcı bu resimler arasında gezinmek için .prev ve .next butonlarını kullanabilir veya aşağıdaki butonlarla doğrudan belirli bir resmi seçebilir.

• .container: Ana içeriği tutan bölümdür.

• .resimler: Resimlerin bulunduğu kısımdır.

• .prev ve .next: Önceki ve sonraki resme geçiş yapmayı sağlayan butonlardır.

• .butonlar: Kullanıcının doğrudan belirli bir resme gitmesini sağlayan butonları içerir.

CSS STİLLERİ

Bu bölümde, slider'ın stilini belirlemek için CSS kullanılmıştır:

.container {
    width:60%;
    margin: 3rem auto;
    background-color: #eee;
    padding:2rem;
}
.resimler { 
    position: relative;
    overflow:hidden;
    height:50vh;
}
.resimler img {
    width:100%;
}
.butonlar {
    margin-top:2rem;
    text-align: center;
}
.butonlar button {
    padding: 1rem 2rem;
    cursor:pointer;
    margin:0 .6rem;
    background: #fff;
}
.butonlar button:hover {
    font-weight: bold;
}
.prev , .next {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    font-size:3rem;
    font-weight: bold;
    text-shadow: 0 0 1rem #000;
    color:#fff;
    cursor: pointer;
    padding: 1rem;
    user-select: none;
}
.prev {left:1rem; }
.next {right:1rem; }

@media (max-width:1000px) {
    html {font-size: 10px;}
    .container {width: 80%; }
    .resimler { height:30vh; }
}

Burada, .container sınıfı genel kutu stilini belirlerken, .resimler sınıfı resimlerin bulunduğu alanı şekillendirir. .prev ve .next sınıfları, ileri-geri butonlarının konumunu ve stilini ayarlar. Ayrıca, @media sorgusu kullanarak ekran genişliği 1000px'den küçük olduğunda responsive bir tasarım sağlıyoruz.

JAVASCRIPT KODLARI

toplamresim=document.querySelectorAll("img").length;
aktif_slayt=0;
goster(aktif_slayt);

function goster(a) {
    document.querySelectorAll("img")[a].style.display="block";    
    for (i=0;i<toplamresim;i++) {     
        if (a!=i) {
            document.querySelectorAll("img")[i].style.display="none";
        }
    } 
    aktif_slayt=a;
}

document.getElementById("buton1").addEventListener("mouseover",function() {
    goster(0);
})
document.getElementById("buton2").addEventListener("mouseover",function() {
    goster(1);
})
document.getElementById("buton3").addEventListener("mouseover",function() {
    goster(2);
})

document.querySelector(".prev").addEventListener("click",function() {
    if (aktif_slayt==0) {
        aktif_slayt=toplamresim-1;
    }
    else {aktif_slayt--;}
    goster(aktif_slayt);
})
document.querySelector(".next").addEventListener("click",function() {
    if (aktif_slayt==toplamresim-1) {
        aktif_slayt=0;
    }
    else {aktif_slayt++;}
    goster(aktif_slayt);
})

• goster(a) Fonksiyonu: Girilen indeks numarasına göre ilgili resmi gösterir, diğerlerini gizler.

• İleri & Geri Butonları: .prev ve .next butonlarına tıklanarak bir önceki veya sonraki resme geçiş yapılır.

• Resim Butonları: Kullanıcı, ilgili butonun üzerine gelince (mouseover), ilgili resim gösterilir.

Görüşmek üzere...