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 super simple slider eklentisini indirip proje klasörüne atıyoruz. (eklentiyi indirin)
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> |
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.
|
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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></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> |
Çalışmanın bitmiş hali indirmek için tıklayın.
iyi günler ben bu kodu kendi websiteme uyguladığımda çalışmıyor. öncelikle sayfa ve slider classlarının içeriği nerede yazıyor bulamadım.yardımcı olursanız çok sevinirim
Paylaşmış olduğunuz bilgi için teşekkür ederim.
[…] Basit Jquery Slider (Simple Slider) […]