Home JQuery JQuery – Portfolyo Slider
JQuery – Portfolyo Slider

JQuery – Portfolyo Slider

178
15

Merhaba Arkadaşlar,

Sizlere yeni tarz sitelerde gördüğünüz, jquery ile yapılmış bir portfölyo çalışmayı paylaşacağım. Bu uygulamayı gördüğünüzde zaten sayfanızda nerelerde kullanacağınıza karar vereceksiniz. Benim beğendiğim çalışmalardan bir tanesidir. Sizinde beğeneceğinizi sanıyorum. 

İndireceğiniz çalışmada index.html dosyası 3 adet ise klasör bulunmaktadır. Bu klasörlerin 2 si jquery kodları ve css kodları barındırmaktadır. Çalışmanın ayarları yapıldığı için sizin o iki klasörle uğraşmanıza gerek yok. Ama images klasörünün içinde assets diye bir klasör var resimlerinizi buraya koyuyorsunuz sonrada index.html dosyasında tanımlıyorsunuz o kadar. index.html dosyasını açtığınızda 1. slider 2. slider …. 7.slider a kadar gidiyor daha fazla slider koymak istiyorsanız bu kodların olduğu satırı olduğu gibi kopyalayıp sonraki slider altına yapıştırmanız gerekmektedir. Çalışmayı anlayabilmeniz için çok iyi şekilde düzenledim. index.html dosyasına baktığınızda bunu çok iyi anlayacaksınız. Herbir sliderın üzerine slider numarası koydum,türkçeleştirdim vs. vs.

Örneğin.

<!-- ####  6. slider ### --> <li> <div> <img src="./images/standard/latest_projects/pic6.jpg" alt=""> </div> <div> <div>Ut duo odio posse</div> <div><a href="#"> <span> Devamı</span></a></div> <div></div> <div>Et vel mutat clita torquatos, est in euripidis scriptorem, ex doming dolores democritum.<br><br> In quando argumentum quo, at eam altera blandit gloriatur, id usu solet dicunt perfecto.</div> </div> <div> <div>Sarı renkli</div> </div> </li>

kısacası 6. slider yapım kodu yukarıda yer almıştır. Bu kodu olduğu gibi kopyalayıp 8. slider başlığını atarak ve resmi değiştirerek işleminizi tamamlayabilirsiniz. Devamı olan

<div><a href="http://www.omerbozalan.com"> <span> Devamı</span></a></div>

yukarıdaki satırda ise devam yazısına tıkladığınızda gidilecek linki yazıyor. Ben oraya kendi sitemi yazdım. Sizde istediğinizi yazabilirsiniz.

Şimdilik bu kadar. Anlamadığınız bir nokta olursa yorum kısmından iletişime geçiniz.

KOLAY GELSİN.


ÇALIŞMAYI GÖRMEK İÇİN TIKLAYIN

ÇALIŞMAYI İNDİRMEK İÇİN TIKLAYIN

 

(178)

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(15)

  1. Hocam çok teşekkür ederim emeğine ve anlatımına sağlık. Uzun zamandır böyle bir plugin arıyordum. tekrardan Teşekkürler

  2. resmin üzerine geldiğimizde tamamına değilde yarısına kadar o perdeyi indirmek istesek ne yapmalıyız

  3. ömer bey çalışma çok güzel ben indirip uyguladım fakat aynı sayfada nivo slider da var onunla çakıştı bununla ilgili olarak ne yapabilirim bir bilginiz var mı?

  4. Ömer bey 2 slider da aynı sayfa için kullanmak istemiştim üst kısımda nivo slider büyük resimlerle
    alt bolumdede urunleri küçük resimlerle tanıtmak için minislides kullandım fakat zannediyorum nivo liderdan dolayı minislides taki resimler alt alta çıkıyor üzerine gelinince kısa çizgi ve devamı yazısıda uzun bir sekilde resmin altın da çıkıyor diyer resimler de alt alta geliyor çizgilerde ve devamı yazılarıda uzun ve alt alta çıkıyor bununla ilgili bir çözüm varmıdır yazarsanız sevinirim teşekkürler…

  5. Ömer bey ben bir çözüm yolu aradım ama bulamıyorum lütfen var ise siz söylermisiniz.

  6. Ömer bey benim yapmaya çalıştığım siteme Carouselslider eklemem gerekiyor fakat sizin portfolyo slider nivo sliderla çakıştığı için çalışmadı. nivo sliderın böyle bir uygulamasıvar mıdır.çok teşekkürler

  7. Ömer bey sizi çok rahatsız ettim biliyorum kusura bakmayın, ben nivo slider ile olan çakışmayı çözdüm çözünce verdiğiniz örnek şıp diye çalıştı çok teşekkür ederim. ömer bey sağlığınız hep daim olsun bizleri güzel ders anlatımlarınızdan mahrum bırakmayın sevgilerle.

    1. Gülşah hanım gün içinde işlerimin yoğunluğundan sizin msjlarınızı yeni gördüm. Kendi işinizi kendiniz görmeniz beni mutlu etti. 🙂 Kolay gelsin.

  8. ömer bey yine ben bir ricam olucak sliderı çalıştırdım fakat manuel çalışıyo otomatik tek tek dönmesi için ne yapmak gerekli sevgilerle…

  9. emeğinize sağlık hocam
    çok güzel bir insansınız siz
    her şey karşılıksız
    tek amaç insanların bir şeyler öğrenmesi

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.