Іноді при створенні сайтів нам потрібно вивести на його сторінках слайдер зображень.
Наприклад ви створюєте HTML сторінку або ж Landing Page, або ж будь-який інший сайт, і вам потрібно відобразити якусь інформацію у вигляді зображень які будуть перегоратися при кліці або ж із заданим проміжком часу, тут нам і прийде на допомогу слайдер зображень.
В принципі слайдер може бути використаний не тільки для зображень а й для будь-якої іншої інформації, але ми сьогодні розглянемо варіант найпростішого слайдера, саме для зображень!
У слайдері який ми сьогодні розглянемо ми будемо використовувати html, css стилі і JavaScript.
Хоча слайдер дуже простий в якому код JavaScript займає всього 3kb, але він прекрасно справляється з такими функціями як перегортання слайдів, має два види навігації (стрілочки вправо/вліво і навігаційні квадратики), присутній невеликий ефект анімації, є можливість задавати час перегортання, робити авто прокрутку або ж тільки перегортати при кліці, ну і інші можливості які ми опишемо на сторінці нижче.
Загалом з описом ми закінчили, тепер давайте приступимо до реалізації та написання нашого слайдера зображень.
1. Одже, для відображення слайдера пишемо такий 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 |
<link rel="stylesheet" type="text/css" href="styleshet02.css" /> <script type="text/javascript" src="jscript.js"></script> <div id="wrapper"> <div id="container"> <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div> <div id="slider"> <ul> <li><img src="photos/1.jpg" width="558" height="235" alt="Перше фото" /></li> <li><img src="photos/2.jpg" width="558" height="235" alt="Друге фото" /></li> <li><img src="photos/3.jpg" width="558" height="235" alt="Третє фото" /></li> <li><img src="photos/4.jpg" width="558" height="235" alt="Четверте фото" /></li> <li><img src="photos/5.jpg" width="558" height="235" alt="Пяте фото" /></li> </ul> </div> <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div> <ul id="pagination" class="pagination"> <li onclick="slideshow.pos(0)"></li> <li onclick="slideshow.pos(1)"></li> <li onclick="slideshow.pos(2)"></li> <li onclick="slideshow.pos(3)"></li> <li onclick="slideshow.pos(4)"></li> </ul> </div> </div> |
2. У самому низу сторінки додаємо JS код налаштувань слайдера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', auto:4, resume:false, vertical:false, navid:'pagination', activeclass:'current', position:0, rewind:false, elastic:true, left:'slideleft', right:'slideright' }); </script> |
Опис вищевказаних налаштувань:
- id - id елемента де зберігається слайдер
- auto - Швидкість прокрутки слайдів (можна вказати ціле число або ж false для відключення)
- resume - Продовжувати гортання після натискання кнопки (true / false)
- vertical - Вертикальна зміна слайдів (true / false)
- navid - id списку навігації (квадратики)
- activeclass - назва класу який буде додаватися до елемента списку
- position - стартова позиція (вказується ціле число)
- rewind - Перегортати слайди нескінченно, або при переході наприклад до останнього слайду відмотуємо назад до першого (true / false)
- elastic - додає сіпающийся ефект при зміні слайдів (true / false)
- left - id кнопки вліво
- right - id кнопки вправо
3. Ну і останнє це стилі 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 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 |
#wrapper { margin: 50px auto; width: 673px; } #container { background: #fff; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; height: 235px; padding: 32px; position: relative; } .sliderbutton { cursor: pointer; float: left; height: 235px; width: 25px; } #slideleft { background: url(images/icons.gif) -50px -265px no-repeat; } #slideleft:hover { background-position: -0 -265px; } #slideright { background: url(images/icons.gif) 0 90px no-repeat; } #slideright:hover { background-position: -50px 90px; } #slider { float: left; height: 235px; overflow: auto; position: relative; width: 558px; } #slider ul { left: 0; list-style: none; position: absolute; top: 0; } #slider li { float: left; height: 235px; width: 558px; } .pagination { height: 25px; list-style: none; position: absolute; right: 61px; top: 40px; } .pagination li { background: #ccc; border: 1px solid #fff; cursor: pointer; float: left; height: 8px; margin: 0 4px 0 0; width: 8px; } .pagination li:hover, li.current { background: #fff; } |
Ну ось в принципі і все, наш слайдер готовий, також ви можете завантажити готовий исходник даного слайдера нижче!
Також ви можете скачати готові вихідні нижче.
Немає коментарів
Ви можете залишити коментар першим.