Flex Slider for сайта uCoz
 | |
| Очень легкий слайдер для контента с автоматическим переключением. Чаще всего будет использоваться для выделения цитат, блока вопрос-ответ или философских фраз, но возможны и для другие способы применения. Установка: Начнем с простого - Разметка HTML Код <div id="slider"> <div class="slide"> <p>краткое описание</p> <p>также написано</p> </div> <div class="slide"> <p>здесь описание</p> <p>краткое</p> </div> <div class="slide"> <p>здесь второе описание</p> <p>- еще одно описание </p> </div> </div> CSS Код #slider {color:#2980b9;position:relative;font-size:16px;} #slider p {padding:2px 0 7px;margin:0;} #slider .slide {padding:0 50px;background:url(http://zornet.ru/Aben/Gsa/bq2.png) 0 0 no-repeat;} .flex-direction-nav,.flex-direction-nav li {padding:0;margin:0;list-style:none;} .flex-direction-nav a { z-index:20; position:absolute; cursor:pointer; display:block; width: 15px; height: 28px; top:16px; right:0; background:url(http://madeas.ru/icon/blog-arrows.jpg); overflow:hidden; text-indent:100%; white-space:nowrap; } .flex-direction-nav a:hover {background-position:0 -28px;} .flex-direction-nav a.flex-prev {right:30px;} .flex-direction-nav a.flex-next {background-position:-15px 0;} .flex-direction-nav a.flex-next:hover {background-position: -15px -28px;} Подключаем jQuery Код <script type="text/javascript" src="/.s/t/1291/jquery.flexslider-min.js"></script> и напоследок мини скрипт: Код <script type="text/javascript"> $(function() { $('#slider').flexslider({ selector: ".slide", slideshowSpeed: 5000, pauseOnHover: true, controlNav: false }); }); </script> В котором: slideshowSpeed: 5000, - скорость перехода pauseOnHover: true, - пауза при наведении мышкой (если не нужно заменяем true на false) Автор скрипта: Tyler Smith 2012 Демонстрация работоспособности: Flex Slider contenta jQuery не требует загрузки в корень сайта, так как располагается уже в uCoz и подойдёт к любому сайту. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 7 | |
|
| |
