Все для веб-дизайнера
Как создать слайдер с навигацией для сайта
Слайдер весьма удобная штука на сайте где дизайнер хочет донести информацию до читателя с помощью графика, красивая организация, лаконичный дизайн позволяет поместить множество информации в достаточно небольшом пространстве, при этом слайдер не останется без внимания посетителя, так как всегда находится на видном месте. В сегодняшнем уроке речь пойдет о процессе создания замечательного слайдера с множеством полезных функций, которые сделают ваш сайт уникальным.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
В этом слайдере помещены все необходимые и возможные функции, мы постарались максимально упростить его разработку, при этом добавив все новые возможности. У нас будет 7 слайдов, с возможностью быстрой навигаций, как стрелками, так и панелями. Кроме этого есть функция автоматического проигрывания, а также полноекранное развертывание что весьма хорошо скажется на улучшении отображения.
Шаг 1. HTML
Разметка будет достаточно простой, так как большую часть функций берет на себя плагин jlider, то нас остается создать неупорядоченный список, при этом обвернув все это в класс jlide:
|
1 2 3 4 5 6 7 8 9 |
<ul class="jlider" id="jl2"> <li><img src="nfs/1.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 1"/></li> <li><img src="nfs/2.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 2"/></li> <li><img src="nfs/3.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 3"/></li> <li><img src="nfs/8.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 4"/></li> <li><img src="nfs/5.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 5"/></li> <li><img src="nfs/6.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 6"/></li> <li><img src="nfs/7.jpg" data-href="#" alt="Подпись для изображения" title="Image Title 7"/></li> </ul> |
Также мы добавили ссылки для изображений и подписи, для отображения подписи у нас будет прозрачная плашка, которая будет отображаться в низу слайдера.
Шаг 2. 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 |
body { font-family: Arial, sans-serif; background: #294555; color: #fff; } h2 { max-width: 600px; width: 100%; margin: 0 auto; } pre { max-width: 600px; width: 100%; max-height: 300px; margin: 20px auto; overflow: hidden; overflow-x: auto; overflow-y: auto; background-color: rgba(0,0,0,0.5); padding: 10px 0; } #checkout { background: #fff; padding: 10px; color: #333; font-size: 18px; width: 260px; display: block; text-align: center; margin: 100px auto; } .jlider_frame { position: relative; margin: 20px auto; box-shadow: 0 0 10px rgba(0,0,0,0.3); } |
Шаг 3. 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 |
<script type="text/javascript"> $(document).ready(function() { $("#jl2").jliderSlide({ : "random", : 6000, : false, : "800px", : "420px", photoCaption : true, visiProgress : true, : true, : "hover", : "line", : function (curSlide) { console.log('Loaded...!'); }, : function (curSlide) { console.log('Pressed Play button...!'); }, : function (curSlide) { console.log('Pressed Pause button...!'); } }); }); </script> |
Здесь вы можете изменить несколько основным параметров, таких как размер, эффекты, и автоматическое воспроизведение. В результате простых действий и плагина jlide мы получили замечательный слайдер.
Вот и все. Готово!
Интересно:
| Опубликовал admin 28.05.2015 в 18:55, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...