Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Emir adlı bir eğitimcinin izleyicilerin isteği üzerine hazırladığı web geliştirme eğitimidir. Eğitmen, izleyicilerin yorumlarda isteği üzerine slider yapımını adım adım göstermektedir.
- Videoda, HTML, CSS ve JavaScript kullanılarak modern bir slider uygulaması oluşturulmaktadır. Eğitim, slider konteynerinin HTML ile oluşturulması, CSS ile görsel düzenlemelerin yapılması ve JavaScript ile kaydırma fonksiyonlarının yazılması aşamalarını kapsamaktadır. Slider, sınırsız döngüde çalışan, sol ve sağ oklarla kontrol edilebilen, fotoğraf ve metin içeren bir yapıya sahiptir.
- Eğitim sonunda, uygulamanın mobil uyumluluğunu nasıl sağlayabileceğiniz konusunda kısa bir ipucu verilir ve kod dökümünün GitHub üzerinden paylaşılacağı belirtilir.
- 00:01Slider Yapımı Tanıtımı
- Videoda modern ve güzel bir slider yapımı gösterilecek.
- Slider, web sitelerinde görülebilecek, sınırsız döngüde fotoğraflar ve metinlerin geçişini sağlayan bir yapıdır.
- Slider yapımında HTML, CSS ve JavaScript kullanılacak, React yerine daha yaygın kullanılabilen bir yöntem tercih edilecek.
- 01:35HTML Yapısı
- Slider için bir div oluşturulup "slider-container" sınıfı verilerek padding ve boyut ayarları yapılıyor.
- Slider içeriği için "slider" div'i oluşturuluyor ve "image-div" sınıfı ile fotoğraflar barındırılıyor.
- Fotoğrafların altında "text-div" sınıfı ile müşteri yorumları yerleştiriliyor.
- 05:17CSS Stilleri
- Body için font family olarak Sans, genişlik 1200 piksel ve marjin sıfır olarak ayarlanıyor.
- Slider-container için genişlik 1200 piksel, padding yukarıdan ve aşağıdan sıfır, sağdan ve soldan sıfır olarak belirleniyor.
- Slider içeriği için display flex kullanılarak öğeler yan yana sıralanıyor ve align items ile dikey olarak ortalama yapılıyor.
- 07:53Fotoğraf ve Oklar İçin CSS
- Fotoğraflar için display flex kullanılarak genişlik ve yükseklik %100 alınıyor, object-fit object-fit ile tüm alanı kaplaması sağlanıyor.
- Slider-container'a overflow hidden verilerek taşan içerikler gizleniyor.
- Oklar için genişlik 300 piksel, padding yanlardan 10 piksel, cursor pointer olarak ayarlanıyor ve hover durumunda transition ile yumuşak geçiş sağlanıyor.
- 13:01Slider Oluşturma ve Temel İşlemler
- Slider için index oluşturuluyor ve hangi fotoğrafın kaydırıldığı anlık olarak bilinmesi gerekiyor.
- GSP (Gesture Slider Plugin) kullanılarak text div'i 8 saniyede yukarıdan aşağıya indiriliyor.
- Yan yana üç fotoğrafın olduğu şerit için sliderite kullanılarak sağa kaydırma işlemi yapılıyor.
- 15:05Slider Kaydırma Mantığı
- Sağ kaydırma işlemi için index bir arttırılıyor ve y değeri index çarpı 100 olarak hesaplanıyor.
- Sol kaydırma işlemi için slayt left fonksiyonu kullanılarak index azaltılıyor.
- Slider'ın dışarı taşma durumunu önlemek için index kontrolü yapılıyor.
- 20:25Metin Gösterimi ve Mobil Uyumluluk
- Text div'i 5 saniyede eksi 20 pikselden aşağıya iniyor ve opacity değeri sıfırdan geliyor.
- Mobil uyumluluk için max-width özelliği kullanılarak genişlik %100'e kadar genişletiliyor.
- Mobil görünümde fotoğraflar ve metinler flex direction kolon olarak ayarlanarak alt alta sıralanıyor.