Вертикальный слайдер на jQuery

Вертикальный слайдер на jQuery

Предоставляю слайдер для ваших нужд в отвесном исполнении, детальнее в абсолютной новости.

Вертикальный слайдер на jQuery

На страницах, где будет использован данный скрипт в head вставляйте:


<script type=»text/javascript» src=»{THEME}/js/jquery.jcarousel.min.js»></script>  
<link rel=»stylesheet» type=»text/css» href=»{THEME}/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=»120″ height=»150″ style=»max-width:600px;» alt=»» /></li>
  <li><img src=»http://адрес картинки/2.jpg» width=»120″ height=»150″ style=»max-width:600px;» alt=»» /></li>
  <li><img src=»http://адрес картинки/3.jpg» width=»120″ height=»150″ style=»max-width:600px;» alt=»» /></li>
  <li><img src=»http://адрес картинки/4.jpg» width=»120″ height=»150″ style=»max-width:600px;» alt=»» /></li>
  <li><img src=»http://адрес картинки/5.jpg» width=»120″ height=»150″ style=»max-width:600px;» alt=»» /></li>
  <li><img src=»http://адрес картинки/6.jpg» width=»120″ height=»150″ style=»max-width:600px;» alt=»» /></li>
</ul>

демо

Прикреплённые файлы:
Файл: vertical_slider.rar
Размер: [13,19 Kb] (забрали: 271 раз)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *