HW Slider — слайдер на jQuery для сайтов, Joomla и WordPress
X
Заказать сайт
Заказать сайт

HW Slider - слайдер на jQuery для сайтов, Joomla и WordPress

Untitled-3

Слайдеров существует очень много, однако этот завоевал мое сердце простотой установки, отсутствием конфликтов в скриптах и небольшим количеством стилей CSS. Я часто устанавливаю этот слайдер на свои проекты, всего за пару минут. Всем его советую!

Что может этот слайдер?
- листать картинки с эффектом появления, через определенное время;
- Настраивается время показов слайдов;
- имеются стрелочки и тулбар текущего слайдера;
- возможность изменять ширину и высоту слайдера за счет CSS;
- можно картинки слайдера делать ссылками.

Внимание! Доступна новая версия слайдера, в которой можно добавлять подписи к слайдам и вставлять видео. Перейти

 

Как установить данный слайдер.
1. Скачайте исходник

После чего скопируйте все файлы, которые в архиве, в корень вашего сайта.
2. Откройте в редакторе index.html слайдера и скопируйте весь код, который внутри тегов <body> (строки 9-140) в то место на вашем сайте, где вы хотите видеть этот слайдер. Если у вас нет на сайте JQuery, то добавьте перед этим кодом строку 6 из index.html.
3. Проверьте слайдер, он уже должен работать! Если это так, то смело удаляйте index.html слайдера с вашего сервера.

slaiderr

Напутствия:
- Чтобы поменять картинки слайдера, меняйте их в папке img и прописывайте новые названия в строки 135-138.
- Чтобы сделать картинки ссылками, прописывайте код типа: <div class="slide"><a href="ссылка"><img src="img/001.jpg"></a></div> в строках 135-138.
- Строки 68-70
var hwSlideSpeed = 700; Скорость анимации перехода слайда.
var hwTimeOut = 3000; Время до автоматического перелистывания слайдов.
- Чтобы изменить размер слайдера, например, 980 на 360px, измените css:
#slider-wrap{ /* Оболочка слайдера и кнопок */
width:980px;
}
#slider-wrap{ /* Оболочка слайдера и кнопок */
width:980px;
}
#slider{ /* Оболочка слайдера */
width:980px;
height:360px;
overflow: hidden;
border:#eee solid 10px;
position:relative;}
#slider img {
width:980px;
height:360px;
}

Как установить данный слайдер в любую папку на вашем сервере.
Предположим вы хотите установить слайдер в папку корень_сайта/slaider. Сделайте все шаги, как в пункте: "Как установить данный слайдер" за исключением того, что все файлы надо закинуть в корень_сайта/slaider. Далее поменяйте путь в css и строках 135-138 на корень_сайта/slaider/

 

Новая версия слайдера способна:

4235345345435

- Вставлять подписи к слайдам любого html содержимого;
- Вставлять видео вместо картинок.

Скачать слайдер:

 

| | HW Slider - слайдер на jQuery для сайтов, Joomla и WordPress | Слайдеров существует очень много, однако этот завоевал мое сердце простотой установки, отсутствием конфликтов в скриптах и небольшим количеством стиле | https://blogprogram.ru/wp-content/uploads/2014/06/Untitled-3-131x131.jpg

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>