Çok Basit Jquery Slider

DumanInc

Web Development
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
Ticaret - 0%
0   0   0

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 eklentisini indirip proje klasörüne atıyoruz.

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=" "></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=" "></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>
 

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)