Home JQuery JQuery Parallax Slider Yapımı
JQuery Parallax Slider Yapımı

JQuery Parallax Slider Yapımı

766
13

Merhaba Arkadaşlar,
Slider anlatımlarından başlamışken farklı yapıya sahip slider örneklerinide sizlere sunmak istiyorum. Bunlardan bir taneside JQuery  Parallax Slider. Çok farklı bir yapıya sahip bu slider sitenizde görselliğide artıracağına inanıyorum..  Kullanımı diğer sliderlar gibi çok basit aslında . İsterseniz hemen anlatımına geçeyim.

Aşağıdaki indirme linkine tıkladığınızda 3 adet klasör ve 1 adet index.html dosyasıyla karşılaşacaksınız. İmages klasörüne resimlerimizi koyduktan sonra değişiklik yapmak için index.html dosyasını açıyoruz ve aşağıdaki satırlardan düzenlemelerimizi yaptıktan sonra sliderımız kullanıma hazır hale gelecektir.

Örnek ; omer.jpg adında bir resmimiz olsun” Türkçe karakterle resimlerimize isim vermemeye çalışmalısınız yoksa resminiz internet ortamında görüntülenmeyecektir” bu resmin boyutları slider a boyutlarına uygun olması için 760×280 çözünürlüğe çevirmelisiniz. Bunu yaptıktan sonra resmin bir küçük halini 83×55 boyutunda  kaydederek images klasörünün içindeki thumbs klasörünün içine atacağız. Diğer resimlerimizide aynı şekilde düzenliyoruz ve klasörlerimizin içine atıyoruz. Sonrasında ise index.html dosyasını dreamweaver veya frontpage gibi editör programlarımızla açarak ve aşağıdaki satırları düzenliyoruz.

<ul class=”pxs_slider”>
<li><img src=”images/omer.jpg” alt=”First Image” /></li>
<li><img src=”images/2.jpg” alt=”Second Image” /></li>
<li><img src=”images/3.jpg” alt=”Third Image” /></li>
<li><img src=”images/4.jpg” alt=”Forth Image” /></li>
<li><img src=”images/5.jpg” alt=”Fifth Image” /></li>
<li><img src=”images/6.jpg” alt=”Sixth Image” /></li>
</ul>
<div class=”pxs_navigation”>
<span class=”pxs_next”></span>
<span class=”pxs_prev”></span>
</div>
<ul class=”pxs_thumbnails”>
<li><img src=”images/thumbs/omer.jpg” alt=”First Image” /></li>
<li><img src=”images/thumbs/2.jpg” alt=”Second Image” /></li>
<li><img src=”images/thumbs/3.jpg” alt=”Third Image” /></li>
<li><img src=”images/thumbs/4.jpg” alt=”Forth Image” /></li>
<li><img src=”images/thumbs/5.jpg” alt=”Fifth Image” /></li>
<li><img src=”images/thumbs/6.jpg” alt=”Sixth Image” /></li>
</ul>

Yukarıdaki omer. jpeg dosyasına göre düzenlenmiş halidir.

Yorumlarınızı bekliyoruz.

KOLAY GELSİN

DemoButton

hemen-indir-butonu

(766)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(13)

  1. Hocam öncelikle çok teşekkür ederim.Gerçekten yayımladığınız site çok harika.Burdan hergün yeni birşey öğreniyorum.Bir sorum olucak.
    Ben suan html bi site yapıyorum.Bu projenin içindeki images js ve css dosyalarını attım fakat ben bunu sitemde nasıl çalıştırabilirim yardımcı olurmusunuz ?
    sitemde link verip baska sayfaya yönlendirmek istemiyorum.Benim anasayfamda hemen menünün altına koymak istiyorum.
    Şimdiden teşekkür ederim.(Bu arada size sormadan önce araştırdım fakat açıklayıcı cevaplar bulamadım daha yeni olduğum için html de tam bi cevap istiyorum lütfen)

    1. ihsan arkadaşım verdiğim örneklerdeki sayfaların içeriğini kopyalayıp kendi istediğiniz sayfaya yerleştirebilirsiniz.ilk önce burda yayınlanan sayfaların < head> ve < /head> arasındaki scriptleri kendi sayfanıza kopyalayın sonrasında ise < /body> içeriğinide kendi sayfanızda oluşturmuş olduğunuz tablo veya< div>in içine yerleştirdiğinizde tamamen istediğiniz gibi olacaktır. tabiki tavsiyem css ve html dersleri almanız ve öğrenmeniz gerekmektedir.

  2. ihsan bey yazdığım yazıyı tekrar okuyun çünkü bazı yerleri çıkmamıştı düzelttim. söylediklerinizle ilgili emin olun bir video çekeceğim. facebook beğen sayfamıza üye olursanız ordan haberleri yayınlıyorum direk karşınıza çıkar. kolay gelsin

  3. sitenizi çok beğendim birde bu galerinin fla dosyası olsaydı sonuçta sadece flash ile hazırlanmış bir site yapacaksak bu galeriyi kullanamayacağız demek oluyor

    1. Bu flash yapılmış bir resim galerisi değil sadece javascript ve jquery ağırlıklı bir slider. Fla dosyası olmaz o yüzden. herşeyi kodlarla yaparsınız… Flash daha farklıdır…

  4. merhabalar oncelilikle paylasimlariniz icin tesekkur ederim. Ben bu eklentiyi sitemin tam ortasinda daha kucuk olarak eklemek istiyorum yardimci olursaniz sevinirim

  5. Hocam öncelikle çok teşekkür ederim.Gerçekten yayımladığınız site çok harika ve çok bilgilendirici. Hocam ben bu kodları asp.net’e nasıl yazarım.

    1. Muhammed arkadaşım kodları nasıl yazarım çok geniş bir konu. ASP biliyorsan yapman gereken yönetim panelinden bu sayfa için bir yönetim sayfası oluşturup. Resim upload bölümü oluşturup sonrasında o resim kodunu slider’ın resim kodlarının oraya yazdırman. Daha başka bir şey yapmıyorsun. Bu sayfayı olduğu gibi kullanabilirsin.

Senin Yorumların

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

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.