Archie Goodwin

Простой в установке слайдер с автоматическим перелистыванием изображений с определенной частотой также реагирует на прокрутку колесика мышки и перелистывает изображения взад-вперед посредством кнопок-ссылок.

Эффект перелистывания довольно незамысловат - изображение поднимается вверх и постепенно скрывается благодаря свойству overflow, а на его место стает следующее изображение на очереди.

Для тайтлового слайдера на главную страницу этого недостаточно, но он будет очень гармонично смотреться в качестве слайдера в информере - комментариев, опубликованных материалов, фотографий в галерее и пр.

Перед установкой слайдера к себе на сайт, скачайте файлы js прилагающиеся к посту и затем загрузите их себе на хостинг.

HTML-код слайдера необходимо вставить в той части страницы, где непосредственно есть желание видеть слайдер, главное чтобы в пределах тегов body:

<a href="#" id="slide1_prev">« prev</a> | <a href="#" id="slide1_next">next »</a> 
 <ul id="slide1"> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 </ul> 

Код javascript рекомендуется ставить в самый низ страницы перед закрывающим тегом body

 <script type="text/javascript" src="/js/jquery.mousewheel.js"></script> 
 <script type="text/javascript" src="/js/jquery.ulslide.js"></script> 
 <script type="text/javascript"> 
 $(function() { 
 $('#slide1').ulslide({ 
 statusbar: true, 
 width: 443, 
 height: 300, 
 bnext: '#slide1_next', 
 bprev: '#slide1_prev', 
 axis: 'y', 
 mousewheel: true, 
 duration: 500, 
 autoslide: 3000 
 }); 
 }); 
 </script> 

PS Загруженные файлы js-скриптов должны быть в папке с с тем же именем - js, иначе смените ссылки на js файлы в коде выше.

Разберем настройки слайдера:

width: 443, 
height: 300,

Это параметры ширины и высоты слайдера в пикселях, если картинки будут выходить за пределы установленных параметров, то они визуально будут обрезаться скриптом.

 bnext: '#slide1_next', 
 bprev: '#slide1_prev',

Это "имена" (id) элементов, кликая на которые будет осуществляться перелистывание взад и вперед, то есть благодаря этим настройкам есть возможность ставить на одной странице несколько слайдеров

 axis: 'y', 
 mousewheel: true,

Первый параметр отвечает за ось в двухмерной системе координат, в которой будет двигаться слайдер - y - по вертикали, x - по горизонтали. А второй имеет две вариации true и false и отвечает за наличие или, соответственно, отсутствие реакции на прокрутку мышкой.

duration: 500, 
autoslide: 3000 

duration - это параметр продолжительности анимации перелистывания, цифровое обозначение измеряется в миллисекундах. autoslide - это параметр времени задержки, после которого будет активироваться автоперелистывание слайда, если значение этого параметра будет равно нулю, то автоперелистывание в слайдере просто не будет.

PPS Для работы слайдера необходима подключенная библиотека jquery версии не ниже 1.7.2