JavaScript Basit Slider Yapımı

Yazıda herhangi bir eklenti kullanılmadan sadece JavaScript ile basit slider yapımı adım adım anlatılmıştır.

Slayt yapımı için çeşitli yöntemler mevcut.

Çoğu yöntem hazır kütüphane ve karmaşık kodlarla yapılıyor.

Biz sadece CSS display özelliğini kullanarak yapacağız.

Basit slider yapımına öncelikle görsel ara yüz yapısının oluşturulmasıyla başlayalım.

Hazırlayacağımız slider sistemi, sistemin anlaşılması için çok basit olacak ve sadece önceki-sonraki işlevlerine sahip olacak.

<div id="slider">
  <div class="slayt"><img src="https://unsplash.it/600/300?image=0" /></div>
  <div class="slayt"><img src="https://unsplash.it/600/300?image=1" /></div>
  <div class="slayt"><img src="https://unsplash.it/600/300?image=2" /></div>
  <div class="slayt"><img src="https://unsplash.it/600/300?image=3" /></div>
  <div id="kontrol">
    <a href="javascript:oncekiSlayt()">Önceki</a>
    <a href="javascript:sonrakiSlayt()">Sonraki</a>
  </div>
</div>

Hazırlanan ara yüzün daha iyi görünmesi için çeşitli stil tanımlamaları yapalım.

<style>
  #slider {
    font: 19px sans-serif;
    margin: 0px auto;
    position: relative;
    width: 600px;
    height: 300px;
    overflow: hidden;
  }

  #kontrol {
    position: absolute;
    right: 0px;
    bottom: 10px;
  }

  #kontrol a {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    text-decoration: none;
  }
</style>

Slider sisteminin görsel ara yüzü ve stil tanımlamaların yaptıktan sonra JavaScript kodları yazabiliriz.

Slider sistemi için öncelikle slayt sayısını bulmamız gerekiyor.

Slider sistemine ait slaytları seçmek için document nesnesine ait getElementsByClassName metodunu kullanabiliriz.

Seçim işleminden sonra slayt sayısını metodun length özelliği ile kolayca bulabiliriz.

Yapacağımız slider sisteminde tüm slaytların CSS display özelliği none değerini vererek gizliyor ve daha sonra istenilen sıra numarası sahip slaydın gösterilmesini sağlıyoruz.

<script>
"use strict";
  var _slayt = document.getElementsByClassName("slayt");
  var slaytSayisi = _slayt.length;
  var slaytNo = 0;
  var i = 0;

  slaytGoster(slaytNo);

  function sonrakiSlayt() {
    slaytNo++;
    slaytGoster(slaytNo);
  }

  function oncekiSlayt() {
    slaytNo--;
    slaytGoster(slaytNo);
  }

  function slaytGoster(slaytNumarasi) {
    slaytNo = slaytNumarasi;

    if (slaytNumarasi >= slaytSayisi) slaytNo = 0;

    if (slaytNumarasi < 0) slaytNo = slaytSayisi - 1;

    for (i = 0; i < slaytSayisi; i++) {
      _slayt[i].style.display = "none";
    }

    _slayt[slaytNo].style.display = "block";

  }
</script>

Slider sisteminde bulunan önceki-sonraki kontrolleri için oluşturulmuş fonksiyon da slayt sıra numarasını tutan değişkenin değerinin artırarak veya azaltarak slayt geçişlerinin yapılmasını sağlıyoruz.

Sonraki ve önceki kontrollerinde, en sondaki slayttan sonra bir slayt olmadığı için en öndeki slayt, en öndeki slayttan önce bir slayt olmadığı için en sondaki slayt gösterilecektir.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.