- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
FAQs
General Tutorials
MonsterONE Subscrioption
«Coin» Слайдер
Ноябрь 15, 2010
Перед Вами скрипт слайдера, который может автоматически обрезать изображения для создания различных эффектов перехода. Дополнительные инструкции по установке и настройке можно найти по этой ссылке
JavaScript
Для того, чтобы создать рабочий скрипт, файл index-#.html, содержащий слайдер, должен включать в себя следующие строки HTML-кода, чтобы активировать скрипт coin-slider.js и jQuery framework:
Раздел <head> в файле index-#.html содержит следующие строки кода, которые инициализируют функциональность скрипта с основными значениями:
Этот сценарий инициализирует элемент <div> и #coin-slider id. Атрибуты данного скрипта определяют следующие значения:
• width: 565 – ширина панели слайдера;
• height: 290 – высота панели слайдера;
• spw: 7 – клеток в ширину;
• sph: 5 – клеток в высоту;
• delay: 3000 – задержка между изображениями в мс;
• sDelay: 30 – задержка между квадратами в мс;
• opacity: 0.7 – прозрачность названия и навигации;
• titleSpeed: 500 – скорость появления заголовка в мс;
• effect: ‘ ‘ – эффект перехода, параметр random (случайно) установлен по умолчанию (random (случайный), swirl (по кругу), rain (дождь), straigh (прямо));
• navigation: true – кнопки prev/next (пред/след);
• links : true – отображать картинки в виде ссылок;
• hoverPause: true – пауза при наведении курсора мыши.
HTML
Ниже представлен данный HTML-script:
Каждый слайд является изображением (тег <img>), он указан в ссылке (тег <a>). Вы также можете добавить описание для слайда, используя тег <span>. Чтобы добавить слайд, нужно добавить следующий код:
CSS
Вы можете найти скрипт, связанный со списком стилей в главном файле style.css. Вам нужно будет изменить следующие стили:
