Слайдер на jQuery

Всё что относится к phpBB и его модификациям

Модератор: Aleksandr

Аватара
Автор темы
Дим M
Администратор
Администратор
Сообщения: 1133
Репутация: 70
С нами: 5 лет 2 месяца

Слайдер на jQuery

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

Проверено на работоспособность в phpbbex


Изображение


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

! ! !


Аватара
Автор темы
Дим M
Администратор
Администратор
Сообщения: 1133
Репутация: 70
С нами: 5 лет 2 месяца

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

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

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

<!-- INCLUDE overall_header.html --> 
i love you mxIni Mysql

Аватара
Aleksandr M
Модератор
Модератор
Сообщения: 50
Репутация: 5
С нами: 5 лет

Сообщение #3 Aleksandr » 16 января 2014, 19:30

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

Аватара
Prezident M
Ефрейтор
Ефрейтор
Сообщения: 24
Репутация: 4
С нами: 4 года 11 месяцев

Сообщение #4 Prezident » 17 января 2014, 22:00

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

Аватара
Автор темы
Дим M
Администратор
Администратор
Сообщения: 1133
Репутация: 70
С нами: 5 лет 2 месяца

Сообщение #5 Дим » 17 января 2014, 22:23

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


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

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

Кто сейчас на форуме

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