Хочу сказать сразу, что у данного слайдера имеется один существенный минус, он не переключается между изображениями автоматически, пользователю придётся самому нажимать на кнопки вперёд и назад, зато он переключается между изображениями, благодаря колёсику мышки, с точки зрения юзабилити - это огромный плюс слайдеру, но довольно слов, давайте посмотрим демо.
Шаг 1 - Установим JS:
В конец вашей страницы сайта, перед тегом устанавливаем два скрипта, весом в 3 кб и 1 кб:
JS
<script language="JavaScript" type="text/javascript" src="http://ucoz-helper.ucoz.com/sliders/hashslider.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ucoz-helper.ucoz.com/sliders/jquery.mousewheel.min.js"></script>
Шаг 2 - Установим HTML:
Теперь давайте создадим информер новостей, для этого заходим в Админ панель => Инструменты => Информеры => Создать информер
и создаём информер для новостей:
Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: На ваше усмотрение
Количество материалов: например 5
Количество колонок: 1
теперь в шаблон информера, вставляем следующий html код:
HTML
<li>
<a href="$ENTRY_URL$" target="_blank">if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$">else>if($IMG_URL1$)?><img src="$IMG_URL1$">endif?>endif?></a>
</li>
Как вы понимаете мы с вами будем задействовать списки, а информер будет отображать определённое количество строк, в котором будет отображаться изображение новости.
Теперь там где вы хотите видеть отображение содержимого слайдера, устанавливаем следующий html код на вашей страницы сайта.
HTML
<!-- Начало тегов слайдер-->
<div id="slider">
<ul>
$MYINF_1$
</ul>
</div>
<div id="slider_ten">
<img src="http://ucoz-helper.ucoz.com/sliders/shadow.png" alt="тень" />
</div>
<div id="buttons">
<div id="left"> goLeft </div>
<div id="right"> goRight </div>
</div>
<div style="clear: both;"></div>
<ul id="numbers">
<li></li>
</ul>
<!-- /Конец тегов слайдер -->
Как вы понимаете, в нашем html коде мы используем 4 контейнера:
- отображение изображений новостей ($MYINF_1$)
- тень под слайдером
- кнопки переключения
- кнопки переключения в виде кружочков
Хочу сразу предупредить,что слайдер будет отображаться не корректно, если вы пропишите информер ссылкой на скрипт, а именно:
HTML
<div id="slider">
<ul>
<script type="text/javascript" src="http://www.center-dm.ru/informer/1"></script>
</ul>
</div>
Шаг 3 - Установим CSS:
И так, наш слайдер почти готов, всё что нам осталось, так это прописать css стили:
CSS-Code
/* Основа слайдера
------------------------------------------*/
#slider {
position: relative;
width: 400px; height: 200px;
border: 1px solid #999;
overflow: hidden;
margin: 75px auto 0 auto;
z-index: 10;
}
#slider ul {
position: relative;
margin:0px;
padding:0px;
}
#slider ul li {
float: left;
list-style-type: none;
}
/* Ширина и высота тени под слайдером
------------------------------------------*/
#slider_ten {
position: relative;
width: 400px;
height: 35px;
margin: auto auto;
z-index: 10;
}
/* Настройки правой и левой кнопки
------------------------------------------*/
#buttons {
position: relative;
width: 500px; height: 40px;
margin: -100px auto;
z-index: 100;
}
#right {
width: 105px; height: 40px;
background-image: url(http://ucoz-helper.ucoz.com/sliders/next_button.png);
text-indent: -99999px;
float: right;
cursor: pointer;
}
#left {
width: 105px; height: 40px;
background-image: url(http://ucoz-helper.ucoz.com/sliders/back_button.png);
text-indent: -99999px;
float: left;
cursor: pointer;
}
/* Переключатель в виде кружочков
------------------------------------------*/
#numbers {
height: auto;
margin: 35px auto;
text-align: center;
}
#numbers li {
position: relative;
width: 18px; height: 13px;
background-image: url(http://ucoz-helper.ucoz.com/sliders/dot_sprite.png);
background-repeat: no-repeat;
float: left;
margin: 0 0px 5px 0;
cursor: pointer;
text-indent: -99999px;
z-index: 100;
list-style-type: none;
}
.activenum {
background-position: 0 -13px;
}
Мне пришлось внести свои изменения, дабы наши с вами списки отображались правильно, плюс я оставил небольшие комментария, чтобы вам было удобно найти и изменить нужный атрибут стилей.
Примечание:
Незабываем, что в систему uCoz уже вшита библиотека jQuery (версия 1.3.2 и 1.6.1), поэтому прописывать дополнительные библиотеки нам не нужно.
Также не забываем, что в шаге номер два, изображение новостей будет отображаться в том случае, если в настройках новостей у вас включена опция, Краткое описание материала
Админ панель => Новости сайта => Настройки модуля => Поля для добавления материалов:
Вот и всё, наш с вами слайдер готов.