Merhabalar. Uzun bir süredir kendime yaptığım web sitesi için bazı küçük library'ler yaptım. Bunlardan bir tanesi slider yapmanıza olanak sağlayan NSlider. Kullanımı oldukça kolay ve çok hafif bir kütüphane. Boyutu 10 KB'tan küçük. Bu bağlantıdan isterseniz kodlarını inceleyebilir ve indirebilirsiniz, isterseniz de CDN linklerini alabilirsiniz. Şimdi nasıl kullanıldığına dair örnek olması açısından küçük bir örnek yapayım.
Not: Development (geliştirme) ve production (sergileme) olarak 2 branch vardır. Development branch'inde kodlar minify edilmemiştir, yani okunabilir bir şekildedir. Production branch'inde ise kodlar minify edilmiştir, tek satırdır. Sitenizin geliştirme aşamasında eğer özelleştirme yapmayı düşünüyorsanız development branch'indeki kodları kullanabilirsiniz. Ancak sitenizi yayımladıktan sonra production branch'indeki kodlar daha hafif olduğu için o kodları kullanmanız tavsiye edilir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NSlider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fatihege/nslider@1.0.0/src/css/nslider.min.css">
<!-- Slider'ın düzgün bir şekilde görünmesi için bazı stil tanımlamaları -->
<style>
.nslider {
width: 500px; /* Genişlik */
height: 200px; /* Yükseklik */
background-color: #e2e2e2; /* Arka plan rengi */
}
</style>
</head>
<body>
<div class="container">
<!-- Template'i yukarıdaki bağlantılardan alabilirsiniz -->
<div class="nslider">
<div class="nslider-wrapper">
<!-- Her bir slide'da `nslider-slide` class'ı olmak zorundadır -->
<div class="nslider-slide">
Slide 1
</div>
<div class="nslider-slide">
Slide 2
</div>
<div class="nslider-slide">
Slide 3
</div>
</div>
<div class="nslider-button nslider-button-prev"></div> <!-- "Önceki" butonu -->
<div class="nslider-button nslider-button-next"></div> <!-- "Sonraki" butonu -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/fatihege/nslider@1.0.0/src/js/nslider.min.js"></script>
<script>
const slider = new NSlider({ // Yeni bir NSlider nesnesi oluşturuyoruz.
elem: document.querySelector('.container'), // Zorunlu - Slider'ın bir üst elementini belirtin
// Not: Belirttiğiniz element sadece 1 NSlider'a sahip olabilir.
// Buradan aşağıdaki option'lar opsiyoneldir.
// animation: true, // Boolean türünde değer verirseniz eğer verdiğiniz değer `true` ise default ayarlarda animasyon ayarlar, `false` verirseniz animasyonları kapatır.
animation: { // Özel animasyon tanımlamaları
// Eğer animasyonları tamamen kapatmak istemiyorsanız ve aynı zamanda da default ayarlarda olmasını da istemiyorsanız özel tanımlama yapabilirsiniz
duration: 1000, // Animasyonun süresi (ms cinsinden)
timingFunction: 'ease-in' // Animasyonun zamanlama fonksiyonu (Daha fazla bilgi: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)
},
keyboardControl: true, // Klavyedeki sağ ve sol ok tuşları ile kontrol edilmesini istiyorsanız `true` değerini verin
// currentSlide: 2, // Sayfa yüklendiğinde gösterilecek olan slide'ın index'idir. Array mantığıyla çalışır bu nedenle 0'dan başlar
// prevButtonInner: '<', // "Önceki" butonunun içeriğini belirtmenizi sağlar
// nextButtonInner: '>', // "Sonraki" butonunun içeriğini belirtmenizi sağlar
dots: true, // Slider'ın altında bulunan ve slide sayısı kadar olan belirtme "nokta"larının gösterilip gösterilmeyeceğini ayarlayın.
});
// Eğer slider'ın belirttiğiniz süre dahilinde sürekli ileri ya da geri gitmesini istiyorsanız `setInterval()` kullanabilirsiniz.
setInterval(() => slider.next(), 5000); // 5 saniyede bir otomatik olarak bir sonraki slide'a geçer
// setInterval(() => slider.prev(), 5000); // 5 saniyede bir otomatik olarak bir önceki slide'a geçer
</script>
</body>
</html>
Evet, gayet detaylı bir şekilde kütüphanemi anlattığımı düşünüyorum. Eğer bir sorun yaşarsanız GitHub sayfasından'dan issue report yapabilir veya GitHub profilimdeki e-posta adresimden bana ulaşabilirsiniz.
