| Главная » Статьи » Скрипты » Скрипты для uCoz |
Стильный слайдер для текста и картинок на jQuery
 Простой стильный слайдер для картинок и текста. Больше всего подойдёт для светлых дизайнов Для начала посмотрите Демо Установка: После /head на нужных страницах вставляйте: Code <script type="text/javascript" src="/js/verticaltabs.pack.js"></script> <link rel="stylesheet" href="/css/verticaltabs.css" /> <script type="text/javascript"> $(document).ready(function(){ $("#textExample").verticaltabs({speed: 500,slideShow: false,activeIndex: 2}); $("#imageExample").verticaltabs({speed: 1000,slideShow: true,slideShowSpeed: 3000,activeIndex: 0,playPausePos: "topRight"}); }); </script> Следующий код в то место, где должен быть слайдер: 1) Для текста: Code <div class="verticalslider" id="textExample"> <ul class="verticalslider_tabs"> <li><a href="#">Название первой вкладки</a></li> <li><a href="#">Название второй вкладки</a></li> <li><a href="#">Название третьей вкладки</a></li> <li><a href="#">Название четвёртой вкладки</a></li> </ul> <ul class="verticalslider_contents"> <li> Контент первой вкладки </li> <li> Контент второй вкладки </li> <li> Контент третьей вкладки </li> <li> Контент четвёртой вкладки </li> </ul> </div> 2) Для картинок: Code <div class="verticalslider" id="imageExample"> <ul class="verticalslider_tabs image"> <li><a href="#">Название первой вкладки</a></li> <li><a href="#">Название второй вкладки</a></li> <li><a href="#">Название третьей вкладки</a></li> <li><a href="#">Название четвёртой вкладки</a></li> </ul> <ul class="verticalslider_contents"> <li><img src="Ссылка на картинку первой вкладки" /></li> <li><img src="Ссылка на картинку второй вкладки" /></li> <li><img src="Ссылка на картинку третьей вкладки" /></li> <li><img src="Ссылка на картинку четвёртой вкладки" /></li> </ul> </div> Остаётся лишь разместить скрипт из прикреплённого архива в папку js два стиля в папку css и все картинки в папку images | |
| Просмотров: 386 | Теги: | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
