Слайдер установленный под навигацией на этом форуме. Пример можете посмотреть на любой странице форума.
Для начала подключаем скрипты, перед закрывающим тегом
Настройки скрипта:
В то место, в котором хотите увидеть слайдер ставим:
В тему стиля добавляем:
Для задания точных размеров для слайдера в:
100% - меняем на нужное количество пикселей, например -
Скачать:
Обратите внимание.
Раз слайдер на jQuery, то в заголовке страницы должна быть её библиотека:
Для начала подключаем скрипты, перед закрывающим тегом
</head>
ставим:
Код: Выделить всё
<script type="text/javascript" src="ваш сайт/hw.slider.js"></script>
hwSlideSpeed
- Скорость анимации перехода слайда.hwTimeOut
- время до автоматического перелистывания слайдов.hwNeedLinks
- включает или отключает показ ссылок "следующий - предыдущий". Значения true или falseВ то место, в котором хотите увидеть слайдер ставим:
Код: Выделить всё
<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>
Код: Выделить всё
/* 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;
}
Код: Выделить всё
#hw-slider-wrap {
width: 100%;
position: relative;
}
width: 600px;
Скачать:
Обратите внимание.
Раз слайдер на jQuery, то в заголовке страницы должна быть её библиотека:
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Комментарии: 22
А как насчёт:
зы. Кстати, раз слайдер на jQuery, то понятное дело, должна быть подключена библиотека.CabinetAdmin писал(а):Для начала подключаем скрипты, перед закрывающим тегом</body>
ставим:Код: Выделить всё
<script type="text/javascript" src="ваш сайт/hw.slider.js"></script>
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Еще раз огромное спасибо за слайдер! Установила правда, не с первого раза Но сейчас всё в порядке и на том месте, где и хотелось бы.
У меня остался вопрос. Сам слайдер стоит в шапке форума. Вот эти команды
я поставила сразу перед ним, т.е. тоже в шапку форума. Это плохо? или нормально?
У меня остался вопрос. Сам слайдер стоит в шапке форума. Вот эти команды
Код: Выделить всё
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://scienceclub.listbb.ru/images/ranks2/scienceclub_listbb_ru/hw.slider.js"></script>
Форум Science-Леди www.scienceclub.listbb.ru
А можно еще вопрос личного характера? Какие параметры установлены на этом форуме (кабинет админа) для слайдера?
Вот эти
Вот эти
Большое спасибо!CabinetAdmin » 27 дек 2012, 14:57 писал(а):Настройки скрипта:
hwSlideSpeed - Скорость анимации перехода слайда.
hwTimeOut - время до автоматического перелистывания слайдов.
hwNeedLinks - включает или отключает показ ссылок "следующий - предыдущий". Значения true или false
Форум Science-Леди www.scienceclub.listbb.ru
Нормально, но лучше перенести их до тегаUzanka » Сегодня, 04:15 писал(а):Это плохо? или нормально?
</head>
.И да, если в вашем стиле уже есть библиотека jQuery, то вторую ставить не нужно, хватит одной, более свежей версии. В вашем стиле уже подключен jquery по умолчанию:
Код: Выделить всё
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery-1.5.2.min.js"></script>
var hwSlideSpeed = 700;Uzanka » Сегодня, 04:18 писал(а):Какие параметры
var hwTimeOut = 6000;
var hwNeedLinks = true;
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
CabinetAdmin
большое спасибо. Поправлю
большое спасибо. Поправлю
Форум Science-Леди www.scienceclub.listbb.ru