Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..
В данном плагине можно использовать две возвратные функции: при активации слайда и при завершении перехода. В состав плагина включены две темы оформления.
И так, для начала включаем jQuery, стили CSS liteAccordion и код JavaScript liteAccordion:
<head>
<link rel="stylesheet" href="liteAccordion.css">
</head>
<body>
... <!-- Перед закрывающим тегом body -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="liteaccordion.jquery.js"></script>
</body>
Затем создаем структуру аккордеона, для этого вставляем разметку для плагина liteAccordion в код страницы:
<div class="accordion">
<ol>
<li>
<h2><span>Слайд №1</span></h2>
<div></div>
</li>
<li>
<h2><span>Слайд №2</span></h2>
<div></div>
</li>
<li>
<h2><span>Слайд №3</span></h2>
<div></div>
</li>
<li>
<h2><span>Слайд №4</span></h2>
<div></div>
</li>
<li>
<h2><span>Слайд №5</span></h2>
<div></div>
</li>
</ol>
</div>
Для вызова плагина используем:
<script>
$('#yourdiv').liteAccordion();
</script>
Теперь рассмотрим некоторые опции плагина, ниже перечислены параметры с указанием значений по умолчанию:
containerWidth : 960, // ширина аккордеона (px)
containerHeight : 320, // высота аккордеона (px)
headerWidth : 48, // ширина закладок (px)
firstSlide : 1, // номер активного слайда при загрузке страницы (integer)
onActivate : function() {}, // возвратная функция, которая запускается при нажатии кнопки мыши (function)
slideSpeed : 800, // скорость анимации слайда (ms)
slideCallback : function() {}, // возвратная функция, которая запускается после завершения анимации слайда (function)
autoPlay : false, // автоматичсекая прокрутка слайдов (boolean)
pauseOnHover : false, // пауза автоматической прокрутки при наведении курсора мыши на слайд
cycleSpeed : 6000, // время показа слайда (ms)
theme : 'basic', // тема оформления аккордеона ('basic', 'dark')
rounded : false, // использовать закругленные углы (boolean)
enumerateSlides : false // выводить номер слайда в закладке
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.