Вертикальная прокрутка не всегда вписывается в дизайн страницы, а данный плагин поможет реализовать горизонтальную прокрутку.
<ul id="horiz_container_outer">
<li id="horiz_container_inner">
<ul id="horiz_container">
<li><img src="images/toystory.jpg" width="500px" height="300px" alt="История игрушек" /></li>
<li><img src="images/up.jpg" width="500px" height="300px" alt="Вверх" /></li>
<li><img src="images/ratatouille.jpg" width="500px" height="300px" alt="Рататуй" /></li>
<li><img src="images/findingnemo.jpg" width="500px" height="300px" alt="В поисках Немо" /></li>
<li><img src="images/cars.jpg" width="500px" height="300px" alt="Тачки" /></li>
<li><img src="images/monstersinc.jpg" width="500px" height="300px" alt="Корпорация монстров" /></li>
<li><img src="images/bugslife.jpg" width="500px" height="300px" alt="Приключения Флика" /></li>
<li><img src="images/incredibles.jpg" width="500px" height="300px" alt="Супер семейка" /></li>
</ul>
</li>
</ul>Убедитесь, что вы назначили каждому из трех контейнеров ID (container_outer, container_inner и container)
<link rel="stylesheet" type="text/css" href="jquery.horizontal.scroll.css" />
Подключаем jQuery библиотеку и скрипт плагина:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.horizontal.scroll.min.js" type="text/javascript"></script>Вызываем плагин следующим образом:
$(document).ready(function(){
$('#horiz_container_outer').horizontalScroll();
});или скачайте готовые слайдер прокрутка картинок
Теги: 
Добавить пост 