Çok Basit Jquery Slider

DumanInc · 1 Eki 2021

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

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

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

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>

Çok Basit Jquery Slider

DumanInc

Web Development

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

Benzer konular