Слайдеров существует очень много, однако этот завоевал мое сердце простотой установки, отсутствием конфликтов в скриптах и небольшим количеством стилей 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/
Новая версия слайдера способна:
- Вставлять подписи к слайдам любого html содержимого;
- Вставлять видео вместо картинок.
Скачать слайдер:
Добавить комментарий