Хаки и Скрипты Next Generation CMS : Интерфейс, Слайдшоу и анимация, JS : Вертикальный Слайдер

irbees2008 Опубликовано - 7 - апреля Интерфейс

Автор: --------------
Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

Вертикальный Слайдер
1.Скачиваем архив и заливаем в папку с шаблоном Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.На страницах, где будет использован данный скрипт в head вставляйте:

Код:

<script type="text/javascript" src="{tpl_url}/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="{tpl_url}/css/skin.css" />
<script type="text/javascript">

jQuery(document).ready(function() { 
  jQuery('#mycarousel').jcarousel({ 
  vertical: true, 
  scroll: 2 
  }); 
}); 

</script>

Здесь у нас scroll: 2 - количество пролистываемых изображений при нажатии на стрелку

Следующий код вставляйте в то место, где у вас будет сам слайдер:

Код:

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
  <li><img src="http://адрес картинки/1.jpg" width="200" height="200" alt="" /></li>
  <li><img src="http://адрес картинки/2.jpg" width="200" height="200" alt="" /></li>
  <li><img src="http://адрес картинки/3.jpg" width="200" height="200" alt="" /></li>
  <li><img src="http://адрес картинки/4.jpg" width="200" height="200" alt="" /></li>
  <li><img src="http://адрес картинки/5.jpg" width="200" height="200" alt="" /></li>
  <li><img src="http://адрес картинки/6.jpg" width="200" height="200" alt="" /></li>
</ul>

Вот и все пользуемся

Можешь почитать и вот эту статейку "Красивое простое вертекальное меню для сайта"