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

Для начала подключаем скрипты, перед закрывающим тегом </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

Uzanka 25 окт 2013, 15:49 Сообщение

CabinetAdmin
CabinetAdmin писал(а):И да, если в вашем стиле уже есть библиотека 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, это всё одна и та же библиотека, только разные версии. Можно оставить самую свежую из них, остальные смело удалить.
Я попробовала:

1. написать вместо

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

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery-1.5.2.min.js"></script>
более новую версию

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

<script type="text/javascript" src="{T_TEMPLATE_PATH}/1.9.1/jquery.min.js"></script>
Перестала появляться шапка моего форума.

2. попробовала заменить

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

<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery-1.5.2.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="{T_TEMPLATE_PATH}/jquery-1.5.2.min.js"></script>

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Только так нормально работает. Может быть я что-то не так делаю? Или это особенности моего стиля?
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

CabinetAdmin 25 окт 2013, 15:56 Сообщение

Особенности стиля, у вас при открытии станицы шапка плавно появляется и видимо с более новой версией библиотеки, этот эффект не хочет работать. Значит оставьте только одну родную:

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

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

Uzanka 25 окт 2013, 16:08 Сообщение

CabinetAdmin
спасибо! :Rose:
  • 0
Форум Science-Леди www.scienceclub.listbb.ru

romaamor 05 мар 2018, 00:49 Сообщение

CabinetAdmin писал(а): Скачать:
hw-slider.rar
Нету. :(
  • 0

CabinetAdmin 05 мар 2018, 15:43 Сообщение

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

romaamor 05 мар 2018, 16:36 Сообщение

CabinetAdmin писал(а): Ой, поправил.
:Yahoo!:
  • 0

Иринка 01 фев 2019, 10:17 Сообщение

CabinetAdmin, а можно не картинки, а ссылки с описанием?
CabinetAdmin писал(а): Настройки скрипта:

hwSlideSpeed - Скорость анимации перехода слайда.
hwTimeOut - время до автоматического перелистывания слайдов.
hwNeedLinks - включает или отключает показ ссылок "следующий - предыдущий". Значения true или false
Где это нужно настраивать?
  • 0

CabinetAdmin 01 фев 2019, 16:01 Сообщение

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