Заказать сайт

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

Категория: Joomla, JQuery, Wordpress, Все модули и плагины, Плагины, Слайдеры • 9th Июнь 2014 • Нет коммент.

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

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

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

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

ссылка на скачку

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

Напутствия:
- Чтобы поменять картинки слайдера, меняйте их в папке 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/

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