Slider Yapımı

Slider Yapımı: Adım Adım Rehber

Slider’lar, web sitelerinde sıklıkla kullanılan etkileşimli öğelerdir. Kullanıcılara birden fazla içeriği tek bir alanda görüntüleme olanağı sağlarlar ve web sitenizin daha ilgi çekici ve dinamik görünmesini sağlayabilirler.

Slider yapımı, temel HTML, CSS ve JavaScript bilgisi gerektirir. Bu rehberde, adım adım bir slider nasıl yapacağınızı öğreneceksiniz.

1. HTML Yapısı

Slider’ınızın HTML yapısı aşağıdaki gibi olacaktır:

“`html

“`

• .slider sınıfı, slider’ın ana kapsayıcısıdır.
• .slides sınıfı, slider’ın slaytlarını içeren kapsayıcıdır.
• .slide sınıfı, tek bir slaytı temsil eder.
• .img etiketi, slayttaki resmi görüntüler.
• .controls sınıfı, slider’ın kontrol düğmelerini içeren kapsayıcıdır.
• .prev ve .next sınıfları, sırasıyla önceki ve sonraki slayta geçmek için kullanılan düğmelerdir.

2. CSS Stilleri

Slider’ınızın CSS stilleri aşağıdaki gibi olacaktır:

“`css
.slider {
width: 100%;
height: 300px;
overflow: hidden;
}

.slides {
display: flex;
width: 100%;
height: 100%;
}

.slide {
flex: 1;
background-size: cover;
background-position: center;
}

.controls {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.prev, .next {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
color: #000;
cursor: pointer;
}

.prev:hover, .next:hover {
background-color: #ccc;
}
“`

• .slider sınıfı, slider’ın genişliğini ve yüksekliğini belirler. Ayrıca, slider’ın taşmasını gizler.
• .slides sınıfı, slider’ın slaytlarını yatay olarak sıralar.
• .slide sınıfı, tek bir slaytın genişliğini ve yüksekliğini belirler. Ayrıca, slaytın arka plan resmini ayarlar.
• .controls sınıfı, slider’ın kontrol düğmelerini konumlandırır.
• .prev ve .next sınıfları, kontrol düğmelerinin stillerini belirler.

3. JavaScript Kodu

Slider’ınızın JavaScript kodu aşağıdaki gibi olacaktır:

“`javascript
const slider = document.querySelector(‘.slider’);
const slides = document.querySelectorAll(‘.slide’);
const prev = document.querySelector(‘.prev’);
const next = document.querySelector(‘.next’);

let currentSlide = 0;

prev.addEventListener(‘click’, () => {
currentSlide–;
if (currentSlide < 0) {
currentSlide = slides.length – 1;
}
updateSlider();
});

next.addEventListener(‘click’, () => {
currentSlide++;
if (currentSlide > slides.length – 1) {
currentSlide = 0;
}
updateSlider();
});

function updateSlider() {
slides.forEach((slide, index) => {
slide.style.display = ‘none’;
if (index === currentSlide) {
slide.style.display = ‘block’;
}
});
}
“`

• const slider = document.querySelector('.slider'); satırı, slider’ın ana kapsayıcısını seçer.
• const slides = document.querySelectorAll('.slide'); satırı, slider’ın tüm slaytlarını seçer.
• const prev = document.querySelector('.prev'); ve const next = document.querySelector('.next'); satırları, slider’ın kontrol düğmelerini seçer.
• let currentSlide = 0; satırı, şu anda görüntülenen slaytın indeksini tutar.
• prev.addEventListener('click', () => { ... }); ve next.addEventListener('click', () => { ... }); satırları, kontrol düğmelerine tıklandığında çalıştırılacak fonksiyonları tanımlar.
• updateSlider() fonksiyonu, şu anda görüntülenen slaytı günceller.

4. Sonuç

Bu adımları izleyerek, kendi slider’ınızı oluşturabilirsiniz. Slider’ınızı daha da özelleştirmek için CSS stillerini ve JavaScript kodunu değiştirebilirsiniz.