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

Arkadaşlar hepinize iyi akşamlar,

Sıradaki makalem yine jQuery ile ilgili olmakla birlikte kafanıza en çok takılan ‘slider’ mantığını sizlere anlatacağım. Günümüz sitelerininin (Yazete, Hürriyet, Star Gazetesi gibi bir çok haber sitesinde) çoğunda bulunan ve bir gereksinim haline gelen jQuery slider yani manşet haberi sistemi çalışma mantığından bahsedeceğim. jQuery sliderların genel olarak 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ş” şeklinde 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 almayı anladık ama niye bir blok elementin içine daha aldık bunları?” dediğinizi duyar gibiyim. Herşeyin bir nedeni olduğu gibi bunun da bir nedeni var. Çünkü slider ID ‘li blok elementimize position:absolute; değeri verip bu elementi sola, sağa kaydıracağız. featured-slider ID ‘li elementi blok elementi ise sadece bir sayfanın/slaytın gözükmesi için biçimlendireceğiz. Düşündüğünüz gibi featured-slider ID ‘li elementin stiline “overflow:hidden;” özelliğini vereceğiz.

 ——————–

——————–

Yukarıdaki resimde gördüğünüz gibi sliderımızın algoritmasını anlatmak için bir taslak hazırladık. Her elemente farklı renklerde 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 şekilde hepsi bir bütün halinde ve hepsi gözüküyor. Bizim jQuery slider yani manşet haber sisteminde yapacağımız şey ise sadece 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 şekilde 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ı şekilde #slider ‘ımızı bir sayfa sola kaydırıp kalan kısımları gizlediğimizi varsayalım. Alttaki ikinci şekilde olan görünümü elde edeceğiz. Geri kalan diğer 4 blok gözükmeyecektir. Ben resimde 5 elementinde şeklini anlayasınız diye çizdim.