-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
235 lines (220 loc) · 8.78 KB
/
index.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SKDSlider - Full Width Jquery Slider - Jquery Responsive Full Width Slider - Full Screen Slider- Simple Jquery Slider</title>
<meta name="description" content="A jquery light weight image slideshow plugin. Full width and fully responsive simple image slider with fade in and fade out effect.">
<meta name="keywords" content="jquery slideshow, full width slideshow, simple slideshow, simple image slider, responsive slider, full width responsive slider">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Samir Das">
<meta name="language" content="EN">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="src/skdslider.min.js"></script>
<link href="src/skdslider.css" rel="stylesheet">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#demo1').skdslider({
slideSelector: '.slide',
delay:5000,
animationSpeed:2000,
showNextPrev:true,
showPlayButton:true,
autoSlide:true,
animationType:'fading'
});
jQuery('#demo2').skdslider({
slideSelector: '.slide',
delay:5000,
animationSpeed: 1000,
showNextPrev:true,
showPlayButton:false,
autoSlide:true,
animationType:'sliding'
});
});
</script>
<style type="text/css">
body { margin:0; padding:0;}
.demo-code{ background-color:#ffffff; border:1px solid #333333; display:block; padding:10px;}
.option-table td{ border-bottom:1px solid #eeeeee;}
</style>
</head>
<body>
<h3>SKDSlider is a jquery responsive Image Slider. It is very light weight and 100% responsive. It can be used in full width mode. Works on almost all browser. It slides almost anything. Swipe/touch events will work for mobile devices. Here are some demos:</h3>
<h4>Full Width Demo:</h4>
<div id="demo1">
<div class="slide">
<img src="slides/1.jpg" />
<!--Slider Description example-->
<div class="slide-desc">
<h2>Slider Title 1</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</div>
<div class="slide">
<img src="slides/2.jpg" />
<div class="slide-desc">
<h2>Slider Title 2</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</div>
<div class="slide">
<img src="slides/3.jpeg" />
<!--NO Description Here-->
</div>
<div class="slide">
<img src="slides/4.jpg" />
<div class="slide-desc">
<h2>Slider Title 4</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</div>
<div class="slide">
<img src="slides/5.jpg" />
</div>
<div class="slide">
<img src="slides/6.jpg" />
<div class="slide-desc">
<h2>Slider Title 6</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</div>
</div>
<br /><br />
<h4>Sliding Demo:</h4>
<div style="max-width:800px; margin:0 auto;">
<div id="demo2">
<div class="slide">
<img src="slides/1.jpg" />
<!--Slider Description example-->
<div class="slide-desc">
<h2>Slider Title 1</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</div>
<div class="slide"><img src="slides/2.jpg" />
<div class="slide-desc">
<h2>Slider Title 2</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</div>
<div class="slide"><img src="slides/3.jpeg" />
<!--NO Description Here-->
</div>
<div class="slide"><img src="slides/4.jpg" />
<div class="slide-desc">
<h2>Slider Title 4</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</div>
<div class="slide"><img src="slides/5.jpg" /></div>
<div class="slide"><img src="slides/6.jpg" />
<div class="slide-desc">
<h2>Slider Title 6</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</div>
</div>
</div>
<h3>How to use?</h3>
<span class="demo-code"> $('#demo').skdslider({'delay':5000, 'animationSpeed': 2000});</span>
<h3>Available Options</h3>
<p>
<table class="option-table" width="90%" border="0" cellspacing="2" cellpadding="4" align="center">
<tr bgcolor="#CCCCCC">
<td><strong>Option</strong></td>
<td><strong>Description</strong></td>
</tr>
<tr>
<td>slideSelector</td>
<td>Define your slide css selector. Default selector: .slide</td>
</tr>
<tr>
<td>activeClass</td>
<td>Define what class would be set as active class to the active slide. Defaul class name: active</td>
</tr>
<tr>
<td>delay</td>
<td>Delay duration between two slides in micro seconds. Example: 5000</td>
</tr>
<tr>
<td>animationSpeed</td>
<td>Fading Speed in micro seconds. Example: 2000</td>
</tr>
<tr>
<td>animationType</td>
<td>fading/sliding - Default value is fading.</td>
</tr>
<tr>
<td>showNav</td>
<td>true/false - Default value is true. It will show/hide navigation icon</td>
</tr>
<tr>
<td>numericNav</td>
<td>true/false - Default value is false. If true, navigation will be numeric</td>
</tr>
<tr>
<td>autoSlide</td>
<td>true/false - Default value is true. Automatically start slideshow</td>
</tr>
<tr>
<td>showNextPrev</td>
<td>true/false - Default value is false. Either it will show next/prev button or not</td>
</tr>
<tr>
<td>showPlayButton</td>
<td>true/false - Default value is false. Either it will show play/pause button or not</td>
</tr>
<tr>
<td>pauseOnHover</td>
<td>true/false - Default value is false. Pause sliding on mouse hover</td>
</tr>
<tr>
<td>stopSlidingAfter</td>
<td> Default value is false. Other allowed values are 'all', 1,2,3.. If this properties is set, sliding will automatically stop at the specified slide</td>
</tr>
<tr>
<td>onMarkup</td>
<td>It is a hooking api and will be invoked just before UI is generated. So it is possible to modify ui like navigiation layout without modify core file. (example: coming soon...) </td>
</tr>
</table>
</p>
<h3>Download SkdSlider</h3>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7175253790862528";
/* SKDSlider */
google_ad_slot = "4030515492";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br />
<a href="http://dandywebsolution.com/blog/download/skdslider.zip">Click here to download SKDSlider</a>
<h3>Joomla Module for skdslider. Its here. Just download from following link. It is for joomla 2.x+ </h3>
<p><a href="http://dandywebsolution.com/blog/download/mod_skdslider.zip">Click here to download SKDSlider Joomla Module</a><br />
<h3><a href="http://www.opencart.com/index.php?route=extension/extension/info&extension_id=14217">Opencart Module for skdslider. </a></h3>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7175253790862528";
/* SKDSlider */
google_ad_slot = "4030515492";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
<p><strong>Thanks :)</strong></p>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-3415878-12', 'dandywebsolution.com');
ga('send', 'pageview');
</script>
</body>
</html>