Вертикальный слайдер аккордеон - плагин jQuery

Позвольте представить вам элегантный и гибкий вертикальный слайдер аккордеон на jQuery. По нажатию мыши секции аккордеона раздвигаются для вывода дополнительной информации. При этом остальные секции становятся более прозрачными и сужаются. При навигации с помощью кнопок следующая секции сдвигается в основное положение. Также используется плагин jQuery Mousewheel (автор Brandon Aaron), который обеспечивает навигацию по слайдеру с помощью колесика мыши.

Вертикальный слайдер аккордеон

Как использовать

Для слайдера аккордеона нужно создать следующую разметку, которая содержит общий контейнер, навигационные элементы и контенеры для каждого слайда:

<div id="va-accordion" class="va-container">
	<div class="va-nav">
		<span class="va-nav-prev">Назад</span>
		<span class="va-nav-next">Дальше</span>
	</div>
	<div class="va-wrapper">
		<div class="va-slice va-slice-1">
			<h3 class="va-title">Маркетинг</h3>
			<div class="va-content">
				<p>Женя Ватсонов</p>
				<ul>
					<li><a href="#">Кто такой</a></li>
					<li><a href="#">Портфолио</a></li>
					<li><a href="#">Контакт</a></li>
				</ul>
			</div>
		</div>
		<div class="va-slice va-slice-2">
		. . .
		</div>
	</div>
	. . .
</div>

Для работы плагина нужно подключить к странице следующие файлы:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.vaccordion.js"></script>

И запускаем плагин:

$('#va-accordion').vaccordion({
	expandedHeight	: 350,
	animSpeed		: 400,
	animOpacity		: 0.7,
	visibleSlices	: 2
});

Доступны следующие опции:

// ширина аккордеона
accordionW		: 1000,
// высота аккордеона
accordionH		: 450,
// количество видимых слайдов
visibleSlices	: 3,
// высота открытого слайда,
// не должна превышать высоты аккордеона
expandedHeight	: 350,
// скорость открытия / закрытия слайда
animSpeed		: 250,
// эффект, используемый при открытии / закрытии слайда
animEasing		: 'jswing',
// значение непрозрачности для сжатых слайдов
animOpacity		: 0.2,
// время затухания содержания слайда
contentAnimSpeed: 900,
// если данная опция имеет значение false,
// все открытие слайды будут сворачиваться перед перемещением
savePositions	: true

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^