jQuery Slider'ın Çalışma Mantığı Nasıldır?

jQuery Slider’ın Çalışma Mantığı Nasıldır? Arkadaşlar hepinize iyi akşamlar, Sıradaki makalem gene jQuery ile ilgili olmakla yanında kafanıza en çok fazla takılan ‘slider’ mantığını sizlere anlatacağım. Günümüz sitelerininin (Yazete, Hürriyet, Star Gazetesi gibi bir çok fazla haber sitesinde) çoğunda bulunan ve bir İhtiyaç durumuna gelen jQuery slider yani manşet haberi sistemi çalışma mantığından bahsedeceğim. jQuery sliderların genel şekilde mantığı aynıdır. En iç kısımda jQuery sliderda görmek istediğimiz sayfaların bulunacağı slaytlar.   Her slayt için bir blok element. Ve bu blok elementlere birer adet class. Class ları ise sıralarına göre “bir, iki, üç, dört, beş” halinde verdiğimizi varsayalım. Ardından bu 5 adet class ‘a sahip blok elementlerin hepsini bir blok element içine daha alıyoruz ve ID ‘sini “slider” veriyoruz. Slider ID ‘li blok elementimizi bir blok element içine daha alıyoruz, ID ‘sini “featured-slider” veriyoruz. Sanki “slider ID ‘li blok elementin içine edinmeyi anladık ama niye bir blok elementin içine daha aldık bunları?” dediğinizi duyar gibiyim. Herşeyin bir nedeni bulunduğu bunun gibi bunun da bir nedeni var. Çünkü slider ID ‘li blok elementimize position:absolute; kıymeti verip bu elementi sola, sağa kaydıracağız. featured-slider ID ‘li elementi blok elementi ise yalnızca bir sayfanın/slaytın gözükmesi için biçimlendireceğiz. Düşündüğünüz bunun gibi featured-slider ID ‘li elementin stiline “overflow:hidden;” özelliğini vereceğiz.    ——————– ——————– Yukarıdaki resimde gördüğünüz bu gibi sliderımızın algoritmasını ifade etmek için bir taslak hazırladık. Her elemente türlü renklerdeki kenarlıklar verdim. Sayfaların/slaytların içine class adlarını yazdım. Sarı kenarlıklı blok featured-slider ID ‘li elementimiz. Siyah kenarlıklı uzun blok ise slider ID ‘li elementimiz. Resimde üstteki biçimde hepsi bir tüm biçiminde ve hepsi gözüküyor. Bizim jQuery slider yani manşet haber sisteminde yapacağımız şey ise yalnızca featured-slider ID ‘li elementin içindekileri göstermek ve haricinde kalanları gizlemek. ——————– Sayfalar/slaytlar arası geçişleri ise slider ID ‘li elementimizi kaydırarak sağlayacağız. Alttaki biçimde ise featured-slider ‘a overflow:hidden; verdiğimizi yani harici kalan kısımları gizlediğimizi varsayalım. Class ‘ı “bir” olan elementin haricinde diğerleri gözükmüyor dimi? Çünkü diğerleri featured-slider ‘ın dışında kalıyor. Aynı biçimde #slider ‘ımızı bir sayfa sola kaydırıp kalan kısımları gizlediğimizi varsayalım. Alttaki ikinci biçimde olan görünümü elde edeceğiz. Geri kalan öbür 4 blok gözükmeyecektir. Ben resimde 5 elementinde alternatifini anlayasınız diye çizdim.


Yapılan Yorumlar
Erdem OFLAZ

Bir mum, diğer mumu tutuşturmakla ışığından bir şey kaybetmez.
 Kategoriler
 Popüler yazılar