Слайдер на jQuery

Описание: Всё что относится к phpBB и его модификациям
Модератор: Aleksandr

Дим M
Автор темы, Администратор
Администратор
Аватара
Дим M
Автор темы, Администратор
Администратор
Сообщения: 1608
Зарегистрирован: 5 апреля 2013
С нами: 10 лет 11 месяцев

#1 Дим » 28 декабря 2013, 15:35

Изображение


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

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

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

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script


Скачать:
hw-slider.rar
(2.67 КБ) 231 скачивание
[center]i love you [s]mxIni[/s] Mysql[/center]


Дим M
Автор темы, Администратор
Администратор
Аватара
Дим M
Автор темы, Администратор
Администратор
Сообщения: 1608
Зарегистрирован: 5 апреля 2013
С нами: 10 лет 11 месяцев

#2 Дим » 28 декабря 2013, 15:40

Я ставил script и сам слайдер в index_body.html, после:

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

<!-- INCLUDE overall_header.html --> 
[center]i love you [s]mxIni[/s] Mysql[/center]

Aleksandr M
Модератор
Модератор
Аватара
Aleksandr M
Модератор
Модератор
Сообщения: 55
Зарегистрирован: 4 июня 2013
С нами: 10 лет 9 месяцев

#3 Aleksandr » 16 января 2014, 19:30

Дим писал(а):Я ставил script и сам слайдер в index_body.html
А почему убрал то?

Prezident M
Ефрейтор
Ефрейтор
Аватара
Prezident M
Ефрейтор
Ефрейтор
Сообщения: 28
Зарегистрирован: 9 июля 2013
С нами: 10 лет 8 месяцев

#4 Prezident » 17 января 2014, 22:00

Aleksandr писал(а):А почему убрал то?
Мне кажется он тут лишний :smile: (слайдер)

Дим M
Автор темы, Администратор
Администратор
Аватара
Дим M
Автор темы, Администратор
Администратор
Сообщения: 1608
Зарегистрирован: 5 апреля 2013
С нами: 10 лет 11 месяцев

#5 Дим » 17 января 2014, 22:23

Prezident писал(а):Мне кажется он тут лишний :smile: (слайдер)
Совершенно верно
[center]i love you [s]mxIni[/s] Mysql[/center]


Вернуться в «phpBB»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 2 гостя