Слайдер для сайта на js и css стиле

Нажмите на изображение для просмотра в полном размере

Описание:
Всем давно известно что такое собой представляет слайдер изображений- это специальный элемент веб-дизайна, представляющий собой блок определенной ширины чаще всего в шапке веб-страницы. Главная его фишка в изменяющихся в ручном или автоматическом режиме элементах – картинок, текстов и ссылок.
Так вот, сегодня предоставляю вашему вниманию одну вариацию и сотни тысяч аналогичных скриптов.
Установка:
1. Скачиваем архив с сайта и заливаем к себе в ФМ в папку 'images'
2. По месту размещения вставляем код:

Код

3. В таблицу стилей CSS вставляем следующий код:

Код

#slider {
  position:relative;
  width:640px;
  height:200px;
  margin-top:6px;
  margin-left:5px;
  margin-bottom:10px;
  background:url('/images/load_blue2.gif') no-repeat 50% 50%;
}
#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}
#slider a {
  border:0;
  display:block;
}

.nivo-controlNav {
  position:absolute;
  left:20px;
  bottom:10px;
}
.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url('/images/bullets.png') no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url('/images/arrows.png') no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0;
  right:15px;
}
a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
  text-shadow:none;
  font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
  color:#efe9d1;
  text-decoration:underline;
}

Посмотреть