20:16
Простой стильный слайдер для картинок и текста. Больше всего подойдёт для светлых дизайнов
Для начала посмотрите ДЕМО
Установка:
После /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
