- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
Слайдер «Faded» (с эффектом растворения)
Ноябрь 15, 2010
Это скрипт слайдера, который создает эффект затухания во время смены слайдов. Этот слайдер можно использовать не только для картинок, но также и для другого контента. Инструкции по полной установке и настройке слайдера Вы найдете, перейдя по этой ссылке.
JavaScript
Чтобы скрипт работал, в index-#.html файле со слайдером должны быть строки HTML кода для того, чтобы добавить jquery.faded.js скрипт и jQuery фреймворк:
Ниже скрипт представлен в HTML (для разного контента):
CSS
Скрипт связанных стилей находится в файле style.css. Вам нужно изменить эти стили:
JavaScript
Чтобы скрипт работал, в index-#.html файле со слайдером должны быть строки HTML кода для того, чтобы добавить jquery.faded.js скрипт и jQuery фреймворк:
В файле index-#.html в области index-#.html (или прямо перед закрывающим тегом </body>) должны быть вот эти строки кода для инициализации функциональности скрипта с основными значениями:
Для инициализации этого скрипта используется <div> элемент с индентификатором id #faded. Атрибуты скрипта определяют такие значения:
• speed: 300 – задает скорость анимации;
• crossfade: false – постепенное проявление контента;
• bigtarget: false – нажать на контент для перехода к следующему слайду;
• loading: false – только для изображений, проверяет загружена ли картинка перед показом;
• autoheight: false – автокорректировка высоты;
• pagination: «pagination» – устанавливает значение на true и имя класса для нумерации страниц; установите на false для отключения этой функции;
• autopagination: true – установите на true , чтобы автоматически создавать нумерацию страниц;
• nextbtn: «next» – класс кнопки next (следующий);
• prevbtn: «prev» – класс кнопки previous (предыдущий);
• loadingimg: false – расположение загрузки изображений (напр. /img/loading.gif) если используете загрузку;
• autoplay: false – автоматическое проигрывание контента (установите четное число для значения true); также установите временный интервал (возьмите 1000 для 1 секунды);
• autorestart: false – автоматический перезапуск, если остановилось автоматическое воспроизведение (установите четное число для значения true); также установите временный интервал (возьмите 1000 для 1 секунды);
• random: false – истановите на true для случайного порядка.
HTML
Ниже этот скрипт представлен в HTML (для изображений):
Для добавления нового слайда просто добавьте картинку (<img> тег):
Ниже скрипт представлен в HTML (для разного контента):
Для того, чтобы добавить слайд Вам просто добавьте элемент маркированного списка (<li> тег):
CSS
Скрипт связанных стилей находится в файле style.css. Вам нужно изменить эти стили: