Русский
Українська
English
Вітаю шановний відвідувач на нашому сайті. Я вже не одноразово публікував статті про те як зробити слайдер для сайту, і сьогодні хочу опублікувати ще один варіант слайдера фотографій, який ви можете використовувати на своєму сайті.
У сьогоднішній статті ми покажемо Вам черговий приклад створення слайдера з дуже красивим дизайном, а також з мініатюрами основних фотографій слайдера.
У наш час складно уявити собі сайт на якому б не використовувалися слайдери, при розробці сайтів я також дуже часто використовую слайдери різних типів в залежності від тематики сайту і його дизайну, адже це дуже красиво, плюс це хороша можливість представити всю основну діяльність вашої компанії у вигляді зображень, також слайдери можна використовувати як міні галерею на сайті.
Сьогодні ми будемо розглядати варіант слайдера в якому будуть красиві ефекти переходів, можливість застосувати якісь свої css стилі для слайдера, кілька корисних опцій які можна застосовувати до слайду, та й взагалі це стильний і сучасний слайдер (галерея) зображень для вашого сайту.
І так, розглянемо основні настройки створення слайдера, також Ви можете завантажити готовий слайдер нижче під статтею, там же ви можете подивитися на роботу даного слайд-шоу в реальному часі онлайн.
І так почнемо, і в першу чергу ми розглянемо 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
|
<div class="example">
<div class="webstydiagallery"><!-- WebstydiaGallery -->
<div class="tn3 album">
<h4>Image 1 title</h4>
<div class="tn3 description">Image 1 description</div>
<div class="tn3 thumb">images/thumb/thumb_pic1.jpg</div>
<ol>
<li>
<h4>Назва зображення 1</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 1</div>
<a href="images/pic1.jpg">
<img src="images/thumb/thumb_pic1.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 2</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 2</div>
<a href="images/pic2.jpg">
<img src="images/thumb/thumb_pic2.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 3</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 3</div>
<a href="images/pic3.jpg">
<img src="images/thumb/thumb_pic3.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 4</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 4</div>
<a href="images/pic4.jpg">
<img src="images/thumb/thumb_pic4.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 5</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 5</div>
<a href="images/pic5.jpg">
<img src="images/thumb/thumb_pic5.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 6</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 6</div>
<a href="images/pic6.jpg">
<img src="images/thumb/thumb_pic6.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 7</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 7</div>
<a href="images/pic7.jpg">
<img src="images/thumb/thumb_pic7.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 8</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 8</div>
<a href="images/pic8.jpg">
<img src="images/thumb/thumb_pic8.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 9</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 9</div>
<a href="images/pic9.jpg">
<img src="images/thumb/thumb_pic9.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 10</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 10</div>
<a href="images/pic10.jpg">
<img src="images/thumb/thumb_pic10.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 11</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 11</div>
<a href="images/pic11.jpg">
<img src="images/thumb/thumb_pic11.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 12</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 12</div>
<a href="images/pic12.jpg">
<img src="images/thumb/thumb_pic12.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 13</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 13</div>
<a href="images/pic1.jpg">
<img src="images/thumb/thumb_pic1.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 14</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 14</div>
<a href="images/pic2.jpg">
<img src="images/thumb/thumb_pic2.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 15</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 15</div>
<a href="images/pic3.jpg">
<img src="images/thumb/thumb_pic3.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 16</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 16</div>
<a href="images/pic4.jpg">
<img src="images/thumb/thumb_pic4.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 17</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 17</div>
<a href="images/pic5.jpg">
<img src="images/thumb/thumb_pic5.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 18</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 18</div>
<a href="images/pic6.jpg">
<img src="images/thumb/thumb_pic6.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 19</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 19</div>
<a href="images/pic7.jpg">
<img src="images/thumb/thumb_pic7.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 20</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 20</div>
<a href="images/pic8.jpg">
<img src="images/thumb/thumb_pic8.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 21</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 21</div>
<a href="images/pic9.jpg">
<img src="images/thumb/thumb_pic9.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 22</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 22</div>
<a href="images/pic10.jpg">
<img src="images/thumb/thumb_pic10.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 23</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 23</div>
<a href="images/pic11.jpg">
<img src="images/thumb/thumb_pic11.jpg" />
</a>
</li>
<li>
<h4>Назва зображення 24</h4>
<div class="tn3 description">Короткий опис зображення в галереї фото 24</div>
<a href="images/pic12.jpg">
<img src="images/thumb/thumb_pic12.jpg" />
</a>
</li>
</ol>
</div>
</div>
</div>
|
Як Ви бачите в коді HTML слайдера немає нічого складного і не звичайного, всі пункти і зображення обгорнуті в елемент ol li. Щоб поміняти картинку або будь-яку іншу інформацію в слайдері зображень у вас не складе труднощів і це ви зробите протягом пари хвилин.
Наступним пунктом йтимуть css стилі, які також не є складними:
|
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
|
body {
background : url('../img/bgp.jpg');
margin:0;
padding:0;
}
.example {
position:relative;
background : url('../img/bgp.jpg');
width:768px;
overflow:hidden;
margin:20px auto;
padding:20px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* custom styles */
.tn3-gallery {
width: 768px;
height: 559px;
}
.tn3-image {
width: 768px;
height: 512px;
}
.tn3-controls-bg {
width: 768px;
}
.tn3-thumbs {
width: 565px;
}
|
Дані стилі Вам потрібно помістити в основний файл стилів вашого сайту, ну або підключити їх окремим файлом наприклад так:
|
1
|
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
|
Це були стилі основної розмітки сторінки а тепер приклад стилів самого слайдера:
|
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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
|
@charset "utf-8";
.tn3-gallery {
position: relative;
width: 620px;
height: 425px;
background-color: #000000;
line-height: normal;
}
.tn3-image {
position: absolute;
width: 620px;
height: 378px;
background-color: #000000;
}
.tn3-controls-bg {
position: absolute;
width: 620px;
height: 47px;
bottom: 0px;
background-image: url('tbg.png');
}
.tn3-thumbs ul, .tn3-thumbs li {
margin: 0;
padding: 0;
}
.tn3-thumbs {
position: absolute;
width: 417px;
height: 37px;
bottom: 0px;
left: 49px;
padding: 4px 28px 4px 28px;
background-image: url('tbg2.png');
}
.tn3-thumb {
border: 1px solid #3e3e3e;
width: 35px;
height: 35px;
margin-right: 3px;
cursor: pointer;
}
.tn3-thumb img {
width: 35px;
height: 35px;
}
.tn3-thumb-over {
border: 1px solid #c3c3c3;
}
.tn3-thumb-selected {
border: 1px solid #c3c3c3;
cursor: default;
}
.tn3-next {
position: absolute;
background-image: url('tn3.png');
background-position: -39px -2px;
width: 30px;
height: 31px;
right: 6px;
cursor: pointer;
}
.tn3-next:hover {
background-position: -39px -39px;
}
.tn3-prev {
position: absolute;
background-image: url('tn3.png');
background-position: -4px -2px;
width: 30px;
height: 31px;
left: 6px;
cursor: pointer;
}
.tn3-prev:hover {
background-position: -4px -39px;
}
.tn3-next-page {
position: absolute;
background-image: url('tn3.png');
background-position: -153px -5px;
width: 25px;
height: 25px;
right: 99px;
bottom: 9px;
cursor: pointer;
}
.tn3-next-page:hover {
background-position: -153px -42px;
}
.tn3-prev-page {
position: absolute;
background-image: url('tn3.png');
background-position: -129px -5px;
width: 25px;
height: 25px;
bottom: 9px;
left: 51px;
cursor: pointer;
}
.tn3-prev-page:hover {
background-position: -129px -42px;
}
.tn3-preloader {
position: absolute;
width: 39px;
height: 15px;
}
.tn3-text-bg {
position: absolute;
top: 0px;
width: 100%;
font-size: medium;
background-image: url('bg.png');
padding-bottom: 1.1em;
}
.tn3-image-title {
font-family: Tahoma, Helvetica, sans-serif;
color: #e0dcdc;
font-size: 0.6875em;
font-weight: bold;
padding: 1.1em 0 0 1.1em;
}
.tn3-image-description {
font-family: Tahoma, Helvetica, sans-serif;
color: #e0dcdc;
font-size: 0.625em;
line-height: 1.1em;
padding-left: 1.1em;
}
.tn3-timer {
position:absolute;
width: 100%;
height: 2px;
bottom: 0px;
background: url('bg.png') repeat;
background: rgba(0, 0, 0, 0.3);
}
.tn3-count {
position:absolute;
right:20px;
bottom:6px;
color:#777777;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
display: none;
}
.tn3-play {
position: absolute;
background-image: url('tn3.png');
background-position: -74px -5px;
left: 13px;
bottom: 9px;
width: 25px;
height: 25px;
cursor: pointer;
}
.tn3-play:hover {
background-position: -74px -42px;
}
.tn3-play-active {
background-position: -101px -4px;
}
.tn3-play-active:hover {
background-position: -101px -41px;
}
.tn3-show-albums {
position: absolute;
background-image: url('tn3.png');
background-position: -177px -6px;
bottom: 9px;
right: 59px;
width: 25px;
height: 25px;
cursor: pointer;
}
.tn3-show-albums:hover {
background-position: -177px -41px;
}
.tn3-fullscreen {
position: absolute;
background-image: url('tn3.png');
background-position: -203px -5px;
bottom: 9px;
right: 11px;
width: 25px;
height: 25px;
cursor: pointer;
}
.tn3-fullscreen:hover {
background-position: -203px -42px;
}
.tn3-albums {
position: absolute;
width: 620px;
height: 425px;
left: 0px;
top: 0px;
color: #e0dcdc;
font-family: Tahoma, Helvetica, sans-serif;
background-image:url('bg.png');
background: rgba(0, 0, 0, 0.7);
}
.tn3-inalbums {
position: absolute;
width: 620px;
height: 380px;
padding: 14px;
top: 45px;
}
.tn3-album {
position:absolute;
width: 280px;
height: 70px;
background-color: #1a1a1a;
overflow: hidden;
cursor: pointer;
}
.tn3-album-over {
background-color: #2a2a2a;
}
.tn3-album-selected {
background-color: #cdcdcd;
color: #111214;
cursor: default;
}
.tn3-album-image {
height: 100%;
width: 80px;
margin-right: 10px;
float: left;
}
.tn3-album-image img {
width: 80px;
height: 80px;
}
.tn3-album-title {
font-size:11px;
font-weight:bold;
margin-top: 1em;
}
.tn3-album-description {
font-size:10px;
height: 3em;
line-height: 1.4em;
overflow: hidden;
}
.tn3-albums-next {
position:absolute;
background-image:url('tn3.png');
background-position: -43px -9px;
width: 20px;
height: 20px;
right:24px;
top:20px;
cursor:pointer;
}
.tn3-albums-next:hover {
background-position: -43px -46px;
}
.tn3-albums-prev {
position:absolute;
background-image:url('tn3.png');
background-position: -9px -9px;
width: 20px;
height: 20px;
right: 46px;
top: 20px;
cursor: pointer;
}
.tn3-albums-prev:hover {
background-position: -9px -46px;
}
.tn3-albums-close {
position: absolute;
background-image: url('tn3.png');
background-position: -237px -9px;
width: 20px;
height: 20px;
left: 20px;
top: 19px;
cursor: pointer;
}
.tn3-albums-close:hover {
background-position: -237px -47px;
}
.tn3-sep1 {
position: absolute;
background-image: url('tn3.png');
width: 2px;
height: 47px;
left: 47px;
}
.tn3-sep2 {
position: absolute;
background-image: url('tn3.png');
width: 2px;
height: 47px;
right: 96px;
}
.tn3-sep3 {
position: absolute;
background-image: url('tn3.png');
width: 2px;
height: 47px;
right: 47px;
}
/* when javascript is disabled */
.tn3.album, .tn3.album li {
float:left;
list-style-type: none;
margin:4px;
}
.tn3.album div, .tn3.album li h4, .tn3.album li div{
display:none;
}
|
Дані стилі вам потрібно також розмістити в основний файл стилів вашого сайту або ж підключити його окремим файлом наприклад так:
|
1
|
<link rel="stylesheet" type="text/css" href="css/tn3/tn3.css" />
|
Все з стилями слайдера ми розібралися, тепер нам потрібно ще додати JS код для того щоб наш слайдер зображень коректно працював і перегортав зображення:
Насамперед обов'язково перевірте чи підключено у вас на сайті jquery, зазвичай на більшості сайтів він підключений якщо ж ні то вам буде потрібно його підключити наприклад так:
|
1
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
|
Після додайте на сайт код JS:
|
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
|
$(document).ready(function() {
var tn3 = $('.webstydiagallery').tn3({
skinDir:'css',
imageClick:'fullscreen',
image:{
maxZoom:2.0,
crop:true,
clickEvent:'dblclick',
transitions:[{
type:'blinds'
},{
type:'grid'
},{
type:'grid',
duration:350,
easing:'easeInQuad',
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:'random',
sortReverse:false,
diagonalStart:'bl',
// fade, scale
method:'scale',
partDuration:360,
partEasing:'easeOutSine',
partDirection:'left'
}]
}
});
});
|
Даний код Ви можете додати конкретно на сторінку де буде відображатися слайдер, або ж підключити його окремим файлом. Ну і останнім пунктом вам потрібно буде щоб слайдер зображень функціонував підключити до сайту ще один файл з кодом JS, завантажити його можливо тут.
Ось власне і все, ми створили красивий, сучасний і неповторний слайдер зображень, користуйтеся на здоров'я.
Приклад того як буде виглядати слайдер зображень:
Або подивитися живий приклад, Ви можете у нас на сайті:
ДЕМО ПРИКЛАД
Також ви можете скачати готовий код нижче.
Немає коментарів
Ви можете залишити коментар першим.