Слайдер на jQuery

Модификации основанные на языке JavaScript.

Скрипты(Огромная галерея скриптов, на любой вкус и цвет)
Аватара пользователя
CabinetAdmin

Слайдер на jQuery

CabinetAdmin 27 дек 2012, 14:57 Сообщение

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

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



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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Слайдер на jQuery

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

Что то они у меня один поверх другого налаживаются.Взял к примеру код от вашего сайта.Посмотреть можно здесь -
Скрытый текст. Необходимо зарегистрироваться.

Аватара пользователя
CabinetAdmin

Re: Слайдер на jQuery

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>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Слайдер на jQuery

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

CabinetAdmin писал(а):А как насчёт:

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

Вставить этот код на сайт ?

Аватара пользователя
CabinetAdmin

Re: Слайдер на jQuery

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

Да, конечно.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Слайдер на jQuery

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

CabinetAdmin писал(а):Да, конечно.

Куда ?

Аватара пользователя
CabinetAdmin

Re: Слайдер на jQuery

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

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

А так, по сути, обычно, такие скрипты всегда ставятся между <head> </head>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Слайдер на jQuery

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

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

Аватара пользователя
CabinetAdmin

Re: Слайдер на jQuery

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

Да. Можно, например, использовать как вывод рекламы, важной информации, объявлений, вместо типичной таблицы под шапкой. Возможностей много:)
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Слайдер на jQuery

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

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

Аватара пользователя
CabinetAdmin

Re: Слайдер на jQuery

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

Не знаю, можно наверно... :unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Слайдер на jQuery

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>

я поставила сразу перед ним, т.е. тоже в шапку форума. Это плохо? или нормально?
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
Uzanka

Re: Слайдер на jQuery

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

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

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

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


Большое спасибо! :Rose:
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
CabinetAdmin

Re: Слайдер на jQuery

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;
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Слайдер на jQuery

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

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



Похожие темы

Вернуться в «JavaScript / jQuery»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость