-
Слайд №1
Я съем этот большой кекс? -
Слайд №2
Опа! -
Слайд №3
Будем играть в прятки? -
Слайд №4
Пиф-паф! Ой-ой-ой! -
Слайд №5
А вон тому красивому я сейчас ухо отстрелю.
1. Включаем 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>
2. Вставляем разметку для плагина 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>
3. Вызываем плагин
<script>
$('#yourdiv').liteAccordion();
</script>
Демонстрация выше привденного кода с небольшими добавлениями текста в содержание слайдов.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ссылка в никуда
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
Ссылка в никуда
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ссылка в никуда
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
Ссылка в никуда
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ссылка в никуда
Ниже перечислены опции плагина с указанием значений по умолчанию:
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 // выводить номер слайда в закладке
Просто укажите опции при вызове функции liteAccordion. Ниже приводится код для аккордеона вверху страницы.
$('#one').liteAccordion({
onActivate : function() {
this.find('figcaption').fadeOut();
},
slideCallback : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : 'dark',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
$('#yourdiv').liteAccordion({
theme : 'dark',
containerWidth : 600,
containerHeight : 200,
slideSpeed : 600,
firstSlide : 2
});