Muhteşem Slider Ekleyin
Merhaba Arkadaşlar
Her zaman ki gibi arşivimi kurcalarken bir klasör içinde Html / Css formatında sade arayüzlü slider çalışması gördüm. Bunu ne ara ve ne zaman arşive aldığımı hiç hatırlamıyorum ama şimdi bir temam olsa kesin kullanırdım. (: Muhteşem slider olduğu kesin. Sade arayüz ile de fazlaca kod karışıklığına yol açmamış. Böyle sade arayüzler her zaman bulunmuyor. O yüzden kullanmasanız bile kesin yedek almanız gerekebilir. Jquery ise kullanılmamış o yüzden kesin olarak kasmaz diyebilirim.İsterseniz hemen konu devamını getirelim.
Bize Bir Stil Kodları Gerek ?
Çok doğru. Arayüzün çalışmasında ön ayak olan stil kodlarıdır. Aşağıdaki kodları çalışmalarınızda “style.css” veya başka isimler ile adlandırdığınız stil dosyaları içine çağırın.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
| @import url(http://fonts.googleapis.com/css?family=Varela+Round);.slides { padding: 0; width: 609px; height: 420px; display: block; margin: 0 auto; position: relative;}.slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}.slides input { display: none; }.slide-container { display: block; }.slide { top: 0; opacity: 0; width: 609px; height: 420px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out;}.slide img { width: 100%; height: 100%;}.nav label { width: 200px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label { opacity: 0.5; }.nav label:hover { opacity: 1; }.nav .next { right: 0; }input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label { display: block; }.nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center;}.nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8);} |
Stil kodlarımızı temanızın stil dosyasına çağırdık. Peki Slider nasıl göstereceğiz ?
Slider Nasıl Göstereceğim ?
Aşağıda vermiş olduğum Html kodları ile de slider nerde göstermek isterseniz oraya ekleyebilirsiniz.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <ul class="slides"><input type="radio" name="radio-btn" id="img-1" checked /><li class="slide-container"><div class="slide"></div><div class="nav"><label for="img-6" class="prev">‹</label><label for="img-2" class="next">›</label></div></li><input type="radio" name="radio-btn" id="img-2" /><li class="slide-container"><div class="slide"></div><div class="nav"><label for="img-1" class="prev">‹</label><label for="img-3" class="next">›</label></div></li><input type="radio" name="radio-btn" id="img-3" /><li class="slide-container"><div class="slide"></div><div class="nav"><label for="img-2" class="prev">‹</label><label for="img-4" class="next">›</label></div></li><input type="radio" name="radio-btn" id="img-4" /><li class="slide-container"><div class="slide"></div><div class="nav"><label for="img-3" class="prev">‹</label><label for="img-5" class="next">›</label></div></li><input type="radio" name="radio-btn" id="img-5" /><li class="slide-container"><div class="slide"></div><div class="nav"><label for="img-4" class="prev">‹</label><label for="img-6" class="next">›</label></div></li><input type="radio" name="radio-btn" id="img-6" /><li class="slide-container"><div class="slide"></div><div class="nav"><label for="img-5" class="prev">‹</label><label for="img-1" class="next">›</label></div></li><li class="nav-dots"><label for="img-1" class="nav-dot" id="img-dot-1"></label><label for="img-2" class="nav-dot" id="img-dot-2"></label><label for="img-3" class="nav-dot" id="img-dot-3"></label><label for="img-4" class="nav-dot" id="img-dot-4"></label><label for="img-5" class="nav-dot" id="img-dot-5"></label><label for="img-6" class="nav-dot" id="img-dot-6"></label></li></ul> |
Slider çalışması için gereken iki ana kodları paylaştık. Peki çalışmaz ise ?
Slider Çalışmıyor. Ne Yapacağım ?
Bu her zaman olan birşey. Bunun önüne geçmek çok basit. Aşağıdaki script tagını <head> </head> arasına koyarak sorunu giderebilirsiniz.
1
|
Son Olarak
Slider kendi temanıza göre “nasıl ayarlarım” yada “nasıl düzenlerim” derseniz, stil kodlarında 25 ve 3 satırları arasındaki değerler ile ayarlıyabilirsiniz. Canlı önizleme olarak ise kendi düzenlemiş olduğum demoyu inceliyebilirsiniz.
alıntı
