Merhaba blogsever! Javascript ile Slider Nasıl Yapılır? Eklenti kullanmama gerek var mı? Saf Javascript ile slide yapmak ne kadar mantıklı olabilir? gibi muhteşem sorulara bugün yanıtlar vereceğim ve iyice beni anladıktan sonra kendin istediğin gibi tasarlayıp sıfırdan slide yapabileceksin!

Not : Bu Slide yapımında herhangi bir eklenti kullanılmamıştır(eklenti kullanmadan slide yapabilirsiniz.).

JavaScript İle Basit Slider Yapımı

Slayt yapımı için çeşitli yöntemler mevcut. Biz sadece CSS’in display özelliğini kullanarak yapacağız.Basit slide yapımına öncelikle görsel ara yüz yapısının oluşturulmasıyla başlayalım.Hazırlayacağımız slide sistemi, sistemin anlaşılması için çok basit olacak ve sadece önceki-sonraki işlevlerine sahip olacak. Hazırlayacağımız slide sistemi, sistemin anlaşılması için çok basit olacak ve sadece önceki-sonraki işlevlerine sahip olacak.

<div id="slide">
  <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>

Arayüzde slide ile sarıcı div oluşturduk ve içerisine slayt classında divler açtık onun içerisine ise fotoğrafları img tagı ile ekledik. Son olarak Javascript de işlem yapabilmemiz için kontrol isimli slideın içinde olacak şekilde div açtık ve a tagının içine function oluşturduk.Evet dostlar şimdi ise hazırlanan ara yüzün daha iyi görünmesi için biraz css yazalım!

<style>
  #slide {
    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>

Evet dostlar! Slide sisteminin görsel ara yüzü ve stil tanımlamalarını yaptık geriye JavaScript işlemi kaldı. Slide sistemi için öncelikle slayt sayısını bulmamız gerekiyor. Slide 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 slide 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>

Slide 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. Evet dostlar! bu şekilde Slide oluşturabilirsiniz. Size en basit ve en anlaşılır şekilde anlatmaya çalıştım. Artık kendi slideınızı Javascript ile yapabileceksiniz! kodlamayla kalın!

Kaynak : W3School

Javascript İle Responsive Slider Yapımı

JavaScript kullanarak bir responsive slide oluşturmanın temel adımlarını aşağıda açıklayabilirim. Bu örnekte, HTML, CSS ve JavaScript’i kullanarak basit bir slide oluşturacağım. Bu slide, ekran boyutuna uyum sağlayacak şekilde tasarlanmıştır.

HTML Kodları

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Slider</title>
</head>
<body>
    <div class="slider-container">
        <div class="slider">
            <div class="slide"><img src="image1.jpg" alt="Slide 1"></div>
            <div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
            <div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS stil Kodları

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    flex: 0 0 100%;
}

img {
    width: 100%;
    height: auto;
}

Javascript Kodları

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;

function nextSlide() {
    currentIndex++;
    if (currentIndex === slides.length) {
        currentIndex = 0;
    }
    updateSlider();
}

function prevSlide() {
    currentIndex--;
    if (currentIndex < 0) {
        currentIndex = slides.length - 1;
    }
    updateSlider();
}

function updateSlider() {
    const translateValue = -currentIndex * 100;
    slider.style.transform = `translateX(${translateValue}%)`;
}

// Otomatik geçiş eklemek isterseniz aşağıdaki satırları açabilirsiniz
// setInterval(nextSlide, 3000);

document.querySelector('.prev-btn').addEventListener('click', prevSlide);
document.querySelector('.next-btn').addEventListener('click', nextSlide);

Bu örnekte, bir HTML yapılandırması, temel bir CSS stili ve bir JavaScript dosyası gösterilmektedir. Slide, .slide sınıfına sahip bir div içinde bulunur ve bu slide’ı kontrol etmek için iki ok düğmesi eklenmiştir (prev-btn ve next-btn). Slide, ekran boyutuna uyum sağlayacak şekilde tasarlanmıştır. JavaScript, slide’ı kontrol etmek ve slayt geçişlerini yönetmek için kullanılır.

Bu kod örneğini kullanarak, slide’ınıza görsel içerik ekleyebilir ve daha fazla özelleştirme yapabilirsiniz.

Diğer Javascript Bloglarına Bakmak İçin

• Javascript Nedir ?
• Javascript İle Dizi Metodları