Javascript ile Slider Oluşturma

11 Haziran 2022
HTML/CSS, Javascript

Merhaba, bu yazımda sizlere Javascript, html ve css kullanarak kendi slider ‘larınızı nasıl oluşturabileceğinizi göstereceğim, kendi slider ‘ınızı oluşturabilmeniz için gerekli kodları yazarken mümkün olduğunca detaylara değinip bazı kod bloklarının yerine eklenebilecek alternatifleriyle birlikte ele alacağız, bu blog yazısı içeriğindeki eğitimin ardından frontend kodlamaya yeni başlayan arkadaşlarımız oldukça eğitici ve çalışma hayatlarında sıkca kullanmaları gerekecek olan slider ‘ları doğru bir şekilde anlayıp kullanabilecekler, artık slider ‘ımızı yazmaya başlayabiliriz.

Yazı İçeriği:

HTML Yapısının Oluşturulması

İster slider, ister bir kart veya bir menü oluşturun, mutlaka kapsayıcı divlere ihtiyacınız olur.

Peki neden kapsayıcı div’lere ihtiyacımız var?
Kapsayıcı div’ler stillendirme kısmında ” response ” denilen yapıyı oluşturmamızda bize kolaylık sağlamaktadır, bir websitesinin içerisinde birçok element bulunabilir.Bu elementler arasında ayrım yapabilmek, ve stillendirme aşamasında istenilen sonuçlara kolay erişebilmek için kapsayıcı div’leri kullanırız. 

<div class="slider">
    <div class="kodlayiruk-slider">
        <!-- kodlarımızı bu alana yazacağız. -->
    </div>
</div>

TERİMLER

Slider ve slide: Slider hazırlamakta olduğumuz yapının bütününe verilen isimdir. Slide ise bu yapı içerisindeki her bir sayfayı(aynı anda görüntülenecek içeriği) temsilen kullanılan bir isimlendirmedir.

Kapsayıcı div’imizi oluşturduk, şimdi ise slider’ımızda bir slide’ın nasıl bir yapıya sahip olacağını belirleyebiliriz.Bu bölümde istediğiniz class isimlerini kullanabilirsiniz, fakat eğer bu eğitimle birlikte ilk kez bir slider yapıyorsanız, blog yazımı daha iyi anlayabilmeniz için class isimlerini aynı bırakmanızı tavsiye ederim.

    <div class="slide fade">
        <div class="number">1 / 3</div>
        <img src="img1.jpg" class="slide-image" />
        <div class="text">İlk Görsel</div>
    </div>

Gelin hep birlikte bu hazırladığımız içeriği inceleyelim.

Görmüş olduğunuz gibi bir kapsayıcı div’imiz bulunmakta [.slide fade] bu div bizim bir slide’ımızı temsil etmektedir.Bu div içerisine ekleyeceğimiz herşey aynı anda slider’ımız üzerinde görüntülenecektir.

Buradaki [.number] isimli div ise slider’ımız üzerinde hangi sayfada olduğumuzu kullanıcılara göstermek için var, tabi bu kısım tamamen stillendirme ile ilgili ve zorunlu değidir.
Aynı şekilde [.text] isimli div de slider’ımız üzerinde bir yazı görüntülemek için eklenmiş olup, kullanmanız tamamen kişisel isteğinize bağlıdır.
Buradaki image elementi ise bir image slider yaptığımız için olmazsa olmaz alanımızdır.

Son olarak tüm slide’larda görüntülenmesini istediğimiz, ileri ve geri butonlarını ekleyebiliriz. Bu butonlar sayesinde bir önceki veya bir sonraki slide’ı görüntüleme işlemini gerçekleştirebileceğiz.

    <a class="prev" onclick="slideRoute(-1)">&#10094;</a>
    <a class="next" onclick="slideRoute(1)">&#10095;</a>

Bu bölümde [.prev] ve [.next] butonlarını eklerken içeriğinde büyüktür(>) ve küçüktür(<) işaretlerinin görüntülenmesini istiyordum fakat bu işaretler HTML kodlarımızı yazarken elementlerin sınırlarını belirlediğimiz standart karakterler oldukları için ve sonrasında human-friendly bir kod oluşturabilmiş olmak için bu karakterleri klavye yordamıyla değil özel karakter kodlarıyla ekledim.

#10094 -> Küçüktür | #10095 -> Büyüktür

Pagination

Bu bölüme kadar olan bütün kodlarımızı [.kodlayiruk-slider] adındaki div’imiz içerine yazmıştık. Şimdi ise bu divin dışına çıkıp ilk başta oluşturduğumuz [.slider] div’i içerisinde pagination(sayfalandırma) işlemi için ihtiyacımız olacak HMTL kodlarını eklememiz gerekiyor.Elbette bu alanda isteğe bağlı bir bölüm.

<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
</div>

Bu bölümde kaç adet slide’ınız var ise o sayıda span oluşturmanız gerekmekte.
CurrentSlide() ise bir fonksiyon olup yazımızın ilerleyen bölümlerinde bu fonksiyonu birlikte oluşturacağız. Bu fonksiyon içerisine gönderdiğimiz 1 değeri ise slide’ımıza verdiğimiz numaradır.
Not: Bu numaraların sıralı olması önemlidir

Benim yazmakta olduğum slider 3 slide’dan oluşmakta bu yüzden kodumu bu şekilde güncelliyorum.

<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

Görmüş olduğunuz gibi herbir span’da değişen tek nokta currentSlide() fonksiyonuma gönderdiğim değerdir.
Bununla birlikte HTML bölümümüzü tamamladık.Artık stillendirme kısmına geçebiliriz.

Stillendirme | CSS’lerin yazılması

Stillendirme aşamasında 2 seçeneğiniz var, aynı dosya içerisinde css kodlarınızı yazabilir veya harici bir css dosyası oluşturup bunu html elementlerimizi hazırladığımız dosyaya import edebilirsiniz.

Stillerinizi harici bir dosya içerisinden çağırmak istiyorsanız html dosyanızdaki <head></head> tagları arasına
<link rel="stylesheet" href="mystyle.css"> link tağını kullanarak ekleme işlemini yapabilirsiniz.

Stillendirme aşaması tamamiyle sizlere kalmış bir bölüm, bu bölümde özellikle ihtiyacımız olan bir kaç class için stillendirmenin nasıl yapıldığını gösteceğim ve ardından kendi slider’ımı oluştururken kullandığım stillendirme(css) kodlarını sizlerle paylaşacağım.


    .active, .dot:hover {
        background-color: #717171;
    }

    /* Fading animasyonu */
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
    }

Pagination işlemi için kullanacağım noktaların renklerinin değişmesi için bir .active classı oluşturdum ve bu class’ı daha sonra javascript kullanarak işlevsel hale getireceğim.
HTML gövdemizi oluştururken slide gövdesine bir class daha eklemiştim, .fade isminde olan bu class ise ufak bir geçiş animasyonu yapmak için kullandım.

Javascript Kodlarının Yazılması

Javascript kodlarımızı aynı stillendirmede olduğu gibi farklı bir dosya içerisinden çağırabilir veya aynı dosya içerisinde <script></script> tagları arasına yazabiliriz.

Not: Eğer aynı dosya içerisinde yazmayı planlıyorsanız mutlaka </body> tagının ardına ekleyin.Aksi durumda kodlarınız doğru çalışmayacaktır.
    let slideIndex = 1;
    slideShow(slideIndex);

    function slideRoute(n) {
        slideShow(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

slideIndex adında bir değişken tanımladık ve varsayılan değerini 1 olarak belirledik bu 1 değeri sayfa yüklendiğinde slider ‘ımızdaki hangi slide ‘ın görüntüleneceğini belirlemektedir.
currentSlide(n) fonksiyonu, pagination bölümünde oluşturduğumuz geçiş butonlarını işlevsel hale getiren fonksiyonumuzdur.
slideRoute(n) fonksiyonu ise ileri ve geri butonlarımızın işlevsel hale gelmesi için kullandığımız fonksiyondur.

Yukarıdaki kod bloklarında gördüğünüz üzere 2 fonksiyonda içerisindeki slideShow() adlı fonksiyona değer göndermekten başka bir iş yapmıyor. Gelin birlikte slideShow() fonksiyonunu oluşturalım.

    function slideShow(n) {
        let i;
        let slides = document.getElementsByClassName("slide");
        let dots = document.getElementsByClassName("dot");
        if (n > slides.length) {
            slideIndex = 1
        }
        if (n < 1) {
            slideIndex = slides.length
        }
        
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display="none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";

        dots[slideIndex-1].className +=" active";
    }

Fonksiyonumuzda kullandığımız değişkenleri tanımakla başlayabiliriz:

  • i -> Daha sonra for döngülerimizde kullanmak için oluşturduğumuz bir değişkendir.
  • slides -> Öncesinde oluşturduğumuz slide’ları html tarafından javascript ile bulup bu değişken atıyoruz ardından bu değişkeni elementlerde javascript ile düzenlemeler yaparken kullanabiliriz.
  • dots -> Aynı şekilde pagination işleminde kullanacağımız elementleri bu değişkene atıyoruz.

Sizlerinde gördüğü gibi bu değişken tanımlama işlemlerinin ardından 2 adet if döngüsü kullanıyoruz.
Bu if döngüleri ileri veya geri butonuna bastığımızda değişen slideIndex değerimizin sıfırın altına düşmesini ve slide sayımızın üzerine çıkmasını engellemekle görevlidir.

Ardından gelen 2 for döngüsü ise slide ‘ların görünürlüğünün kaybolmasını ve sayfa değişimlerinde pagination da kullandığımız elementlerin stillendirmesini değiştirmek için kullanılmıştır.

Son olarak ise görüntülenecek olan slide ‘ın ve active class ‘ını alacak olan olan pagination element ‘imizin stillendirmesi yapılmıştır.

Bununla birlikte slider ‘ımız tamamlanmıştır.
ilerleyen süreçte Javascript ile element yakalama hakkında kapsamlı bir blog yazısı hazırlayıp sizlerle paylaşacağım.

Buraya kadar okuduğunuz için teşekkür ederim.

See the Pen Kodlayiruk – Javascript Slider by Kamil T. (@Likapa) on CodePen.