Bu proje, HTML, CSS ve JavaScript kullanarak basit bir görüntü kaydırma (slider) özelliği oluşturmayı amaçlamaktadır. Slider, web sitelerinde farklı içerikleri (resimler, metinler, vb.) yatayda kaydırmak için kullanılan bir araçtır.
- Proje Amacı
- Nasıl Kullanılır
- Projeyi Çalıştırma
- Geliştirme
- Katkı
Slider Projesi, temel web teknolojilerini (HTML, CSS, JavaScript) kullanarak bir görüntü kaydırma arayüzü oluşturmayı amaçlamaktadır.
- Projeyi indirdikten veya klonladıktan sonra,
index.html
dosyasını bir tarayıcıda açarak slider'ı görüntüleyebilirsiniz. - Sağ ve sol yönlü ok simgelerine tıklayarak görüntüler arasında geçiş yapabilirsiniz.
- Otomatik geçiş işlevini görmek için sağ ve sol ok simgelerine tıklamadan bekleyebilirsiniz.
- Slider'ın görünümünü ve davranışını
style.css
vescript.js
dosyalarını düzenleyerek özelleştirebilirsiniz.
Projeyi yerel bilgisayarınıza klonlamak için aşağıdaki komutları kullanabilirsiniz:
git clone https://github.com/OzcanCAVGA/SliderProject/.git
cd SLIDER-PROJESI
Projeyi klonladıktan sonra, index.html
dosyasını tarayıcınızda açarak slider'ı görüntüleyebilirsiniz.
Projeyi indirdikten sonra, style.css
ve script.js
dosyalarını düzenleyerek slider'ın görünümünü ve davranışını özelleştirebilirsiniz. CSS dosyasında stil değişiklikleri yapabilir, JavaScript dosyasında slider'ın işlevselliğini değiştirebilirsiniz.
Bu proje açık kaynaklıdır ve her türlü katkı ve öneriye açıktır. Eğer projeye katkıda bulunmak isterseniz, GitHub üzerinden bir "pull request" oluşturabilirsiniz. Katkılarınızın proje gelişimine katkıda bulunacağına inanıyoruz.
script.js
dosyasındaki bazı önemli kod parçalarını açıklamak gerekirse:
nextIcon
veprevIcon
, HTML'deki ilgili sınıflara sahip ok ikonlarını seçer.imageContainer
, görüntülerin bulunduğu konteyneri seçer.imgs
, tüm görüntüleri seçer.currentImg
, görüntüler arasında geçiş yaparken hangi görüntünün gösterildiğini takip eder.timeOut
, otomatik geçişin süresini belirlemek için kullanılır.updateImg
fonksiyonu, görüntüler arasındaki geçişi yönetir. Sağ ve sol ok simgelerine tıklamada veya otomatik geçişte çağrılır. Görüntü geçişini ayarlar ve eğer son görüntüye gelinirse başa döner. Otomatik geçiş süresini yönetir vesetTimeout
kullanarak belirli bir süre sonunda bir sonraki görüntüye geçişi sağlar. Görüntü geçişitranslateX
stil özelliği ile yapılır.