Главная » Файлы » Прочие скрипты » jQuery

Стильный слайдер для текста и картинок на jQuery
23.06.14, 09:37:19

Скачать файл




Простой стильный слайдер для картинок и текста. Больше всего подойдёт для светлых дизайнов

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<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) Для текста:
Код
<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) Для картинок:
Код
<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

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: картинок, Стильный, на, JQuery, текста, для, слайдер
Просмотров: 250 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: