- Katılım
- 19 Nis 2009
- Konular
- 423
- Mesajlar
- 1,880
- Çözüm
- 14
- Online süresi
- 3mo 2h
- Reaksiyon Skoru
- 968
- Altın Konu
- 38
- TM Yaşı
- 17 Yıl 1 Ay 24 Gün
- Başarım Puanı
- 267
- MmoLira
- 3,804
- DevLira
- 9
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
Jquery kullanarak çok fazla kodlama yapmadan kullanılabilecek güzel bir slider eklentisi. Kullanacağım slider eklentisi kendi adı ile müstesne süper basit slider (super simple slider) eklentisi olarak ifade edebiliriz.
1.Adım: Jquery
2.Adım: Sliderı kullanacağımız temel html sayfasının aşağıdaki şekilde oluşturuyoruz.
3.Adım: body etiketlerinin arasına slider eklentisi için gerekli olan html kodunu yerleştiriyoruz. resim klasöründeki 3 tane resim dosyasını yol olarak gösteriyoruz.
4.Adım: head etiketleri arasına aşağıdaki slider kodlarını yapıştırıyoruz. Not slider eklentsinin kullanacağı css ve js dosyalarının doğru yolda olduğundan emin olun.
Çalışma tamamlandıktan sonra kodlar aşağıdaki gibi şekillenecektir.
1.Adım: Jquery
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
eklentisini indirip proje klasörüne atıyoruz.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
2.Adım: Sliderı kullanacağımız temel html sayfasının aşağıdaki şekilde oluşturuyoruz.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Örnek Slider Yapımı</title> </head> <body> </body> </html> |
| 1 2 3 4 5 6 7 8 9 | <div class="sayfa"> <div class="slider"> <img src="resim/1.jpg"> <img src="resim/2.jpg"> <img src="resim/3.jpg" > </div> </div> |
4.Adım: head etiketleri arasına aşağıdaki slider kodlarını yapıştırıyoruz. Not slider eklentsinin kullanacağı css ve js dosyalarının doğru yolda olduğundan emin olun.
| 1 2 3 4 5 6 7 8 9 10 | <link rel="stylesheet" href="sss/sss.css" type="text/css" media="all"> <script src="
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
"></script><script src="sss/sss.min.js"></script> <script> jQuery(function($) { $('.slider').sss(); }); </script> |
Çalışma tamamlandıktan sonra kodlar aşağıdaki gibi şekillenecektir.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Örnek Slider Yapımı</title> <link rel="stylesheet" href="sss/sss.css" type="text/css" media="all"> <script src="
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
"></script><script src="sss/sss.min.js"></script> <script> jQuery(function($) { $('.slider').sss(); }); </script> </head> <body> <div class="sayfa"> <div class="slider"> <img src="resim/1.jpg"> <img src="resim/2.jpg"> <img src="resim/3.jpg" > </div> </div> </body> </html> |