Слайдер установленный под навигацией на этом форуме. Пример можете посмотреть на любой странице форума.

Для начала подключаем скрипты, перед закрывающим тегом </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;
}
100% - меняем на нужное количество пикселей, например - width: 600px;

Скачать:
hw-slider.rar
2.67 КБ 441 скачивание

Обратите внимание.
Раз слайдер на jQuery, то в заголовке страницы должна быть её библиотека:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Комментарии: 22

romaamor 27 дек 2012, 15:59 Сообщение

Что то они у меня один поверх другого налаживаются.Взял к примеру код от вашего сайта.Посмотреть можно здесь - [hide]http://amor.gtaserv.ru/index.php[/hide]
  • 0

CabinetAdmin 27 дек 2012, 16:31 Сообщение

А как насчёт:
CabinetAdmin писал(а):Для начала подключаем скрипты, перед закрывающим тегом </body> ставим:

Код: Выделить всё

<script type="text/javascript" src="ваш сайт/hw.slider.js"></script>
зы. Кстати, раз слайдер на jQuery, то понятное дело, должна быть подключена библиотека.

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 27 дек 2012, 16:34 Сообщение

CabinetAdmin писал(а):А как насчёт:
Установил.
CabinetAdmin писал(а):зы. Кстати, раз слайдер на jQuery, то понятное дело, должна быть подключена библиотека.
Вставить этот код на сайт ?
  • 0

CabinetAdmin 27 дек 2012, 16:35 Сообщение

Да, конечно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 27 дек 2012, 16:37 Сообщение

CabinetAdmin писал(а):Да, конечно.
Куда ?
  • 0

CabinetAdmin 27 дек 2012, 16:39 Сообщение

Вместе со скриптом слайдера.

А так, по сути, обычно, такие скрипты всегда ставятся между <head> </head>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 27 дек 2012, 16:43 Сообщение

Заработал. Принцип понятен.Этаким макаром можно сделать шапку меняющеюся. :privet:
  • 0

CabinetAdmin 27 дек 2012, 17:48 Сообщение

Да. Можно, например, использовать как вывод рекламы, важной информации, объявлений, вместо типичной таблицы под шапкой. Возможностей много:)
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 03 фев 2013, 05:50 Сообщение

А можно смену изоброжений привязать к кнопочкам меню ? Например если наводиш стрелку на кнопку меню -одно изображение,форум - другое,и так далие. :)
  • 0

CabinetAdmin 03 фев 2013, 07:06 Сообщение

Не знаю, можно наверно... :unknown
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 22 окт 2013, 01:15 Сообщение

Еще раз огромное спасибо за слайдер! Установила :%) правда, не с первого раза :D Но сейчас всё в порядке и на том месте, где и хотелось бы.

У меня остался вопрос. Сам слайдер стоит в шапке форума. Вот эти команды

Код: Выделить всё

<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>
я поставила сразу перед ним, т.е. тоже в шапку форума. Это плохо? или нормально?
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

Uzanka 22 окт 2013, 01:18 Сообщение

А можно еще вопрос личного характера? :D Какие параметры установлены на этом форуме (кабинет админа) для слайдера?

Вот эти
CabinetAdmin » 27 дек 2012, 14:57 писал(а):Настройки скрипта:

hwSlideSpeed - Скорость анимации перехода слайда.
hwTimeOut - время до автоматического перелистывания слайдов.
hwNeedLinks - включает или отключает показ ссылок "следующий - предыдущий". Значения true или false
Большое спасибо! :Rose:
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 22 окт 2013, 14:55 Сообщение

Uzanka » Сегодня, 04:15 писал(а):Это плохо? или нормально?
Нормально, но лучше перенести их до тега </head>.

И да, если в вашем стиле уже есть библиотека jQuery, то вторую ставить не нужно, хватит одной, более свежей версии. В вашем стиле уже подключен jquery по умолчанию:

Код: Выделить всё

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery-1.5.2.min.js"></script>
jquery.min.js, jquery-1.5.2.min.js, 1.9.1/jquery.min.js, это всё одна и та же библиотека, только разные версии. Можно оставить самую свежую из них, остальные смело удалить.
Uzanka » Сегодня, 04:18 писал(а):Какие параметры
var hwSlideSpeed = 700;
var hwTimeOut = 6000;
var hwNeedLinks = true;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Uzanka 23 окт 2013, 13:19 Сообщение

CabinetAdmin
большое спасибо. Поправлю :Rose:
  • 0
Форум Science-Леди www.scienceclub.listbb.ru