jQuery ve CSS ile iki resmi karşılaştırma (Image comparison slider)

Yeni nesil Buzzfeed çakması sitelerde sıklıkla iki resmin üst üste konularak “Öncesi / Sonrası” içerikli galeriler oluşturulduğuna şahit oluyoruz. İşte bu uygulama sayesinde o işi siz de kolayca yapabilirsiniz.

Bu arada yeri gelmişken, eğer o tür bir site açma düşünceniz varsa kesinlikle doğru yolda olduğunuzu söyleyebilirim. Her türlü yabancı siteden birebir çevirilen kopya içeriklerin son derece düşük beklentileri anlamsızca tatmin ettiği, “Sineklerin bokunun lacivert olmasının 12 sebebi” başlıklı listelerin dahi; mizahi, kültürel, edebi vesaire hiçbir konuda kimseye hiçbir şey katmadığı ve fakat ayakta alkışlandığı bir dönemden geçiyoruz. O siteyi şimdi açmayacaksınız da ne zaman açacaksınız?

Uygulamamıza gelecek olursak, Sony Ultra HD TV’nin ürün tanıtım sayfasından esinlenilerek, jQuery’miz canımız ve CSS’in maharetlerinden faydalanarak oluşturulmuş, basitçe iki resmi üst üste koyarak karşılaştırmaya yarayan, dökümantasyon sayfasında yine nasıl uygulanacağı detaylı olarak anlatılmış olan basit bir slider.

jquery-photo-slider

İster yeni açmayı düşündüğünüz çakma sitenizde “Cesika Alba’nın öncesi sonrası” galerileri oluşturmak, ister e-ticaret sitenizde farklı laptop modellerini karşılaştırmak için kullanabilirsiniz. Bir gün mutlaka bir yerde kullanacağınız düşüncesiyle yer imlerinize ekleyiniz.

Demo Dökümantasyon Download (534 KB)

Facebook Yorumları

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir