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> |
