Для начала подключаем скрипты, перед закрывающим тегом </head> ставим:
Code: Select all
<script type="text/javascript" src="ваш сайт/hw.slider.js"></script> Настройки скрипта:
hwSlideSpeed - Скорость анимации перехода слайда.
hwTimeOut - время до автоматического перелистывания слайдов.
hwNeedLinks - включает или отключает показ ссылок "следующий - предыдущий". Значения true или false
В то место, в котором хотите увидеть слайдер ставим:
Code: Select all
<div id="hw-slider-wrap">
<div id="hw-slider">
<div class="hw-slide">
<img src="изображение" />
<span>Первый слайд</span>
</div>
<div class="hw-slide">
<img src="изображение" />
<span>Второй слайд</span>
</div>
<!-- Плюс дополнительные слайды -->
</div>
</div> В тему стиля добавляем:
Code: Select all
/* HW Slider */
#hw-slider-wrap {
width: 100%;
position: relative;
}
#hw-slider {
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
}
.hw-slide {
width: 100%;
height: 100%;
}
.hw-slide span {
position: absolute;
top: 0;
left: 0;
color: white;
text-shadow: 0 0 5px black;
background: rgba(0,0,0,0.4);
width: 100%;
padding: 5px;
font-size: 14px;
}
.hw-slide span a {
color: white;
text-shadow: 0 0 5px black;
}
/* Кнопки смены слайдов */
.hw-sli-links {
position: absolute;
right: 0;
bottom: 0;
}
.hw-sli-links .control-hw-slide {
margin: 2px;
display: inline-block;
width: 12px;
height: 12px;
overflow: hidden;
text-indent: -9999px;
background: url("ваш сайт/bullets.png") 0 0 no-repeat;
}
.hw-sli-links .control-hw-slide:hover {
cursor: pointer;
background-position: 0 -12px;
}
.hw-sli-links .control-hw-slide.active {
background-position: 0 -12px;
}
/* Ссылка "Следующий" и "Предыдущий" */
#hw-prewbutton, #hw-nextbutton {
display: block;
}
#hw-prewbutton {
left: 10px;
}
#hw-nextbutton {
right: 10px;
}
#hw-prewbutton:hover, #hw-nextbutton:hover {
opacity: 1;
} Для задания точных размеров для слайдера в:
Code: Select all
#hw-slider-wrap {
width: 100%;
position: relative;
} 100% - меняем на нужное количество пикселей, например - width: 600px;
Обратите внимание. Раз слайдер на jQuery, то в заголовке страницы должна быть её библиотека:
Code: Select all
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> Скачать:
(слайдер)