Приветствую уважаемый посетитель на нашем сайте. Я уже не однократно публиковал статьи о том как сделать слайдер для сайта, и сегодня хочу опубликовать еще один вариант слайдера фотографий, который вы можете использовать на своем сайте.
В сегодняшней статье мы покажем Вам очередной пример создание слайдера с очень красивым дизайном, а так же с миниатюрами основных фотографий слайдера.
В наше время сложно представить себе сайт на котором бы не использовались слайдеры, при разработке сайтов я так же очень часто использую слайдеры различных типов в зависимости от тематики сайта и его дизайна, ведь это очень красиво плюс это хорошая возможность представить всю основную деятельность вашей компании в виде изображений, так же слайдеры можно использовать как мини галерею на сайте.
Сегодня мы будем рассматривать вариант слайдера в котором будут красивые эффекты переходов, возможность применить какие то свои 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 скачать его можно здесь.
Вот собственно и все, мы создали красивый, современный и неповторимый слайдер изображений, пользуйтесь на здоровье.
Пример того как будет выглядеть слайдер изображений:
Или посмотреть живой пример, вы можете у нас на сайте:
Нет комментариев
Вы можете оставить комментарий первым.