Вертикальный слайдер аккордеон - плагин 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 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 1 Августа 2011 09:46
    notbot
    Админ сервера ржачный!
  • 14 Октября 2011 10:26
    Shak
    Супер
  • 13 Ноября 2011 22:27
    Vorttep
    HELP! А как изменить чтобы больше 8 людей вставить? Я добавил в styleNoJS.css для каждого нового новое значение и в главном файле изменил классы но не работает! может там что-то надо изменить в js? Заранее благодарю!
  • 8 Декабря 2011 13:17
    webmastergmc
    ХОРОШО!!!
  • 14 Февраля 2012 10:26
    Dynamyte
    куда добавлять плагин ?
  • 16 Февраля 2012 21:17
    sgq09
    Отличное решение!!! СПАСИБО!!!Все отлично работает!!!
  • 6 Апреля 2012 16:18
    dotamovie
    2 просто шикарен!!!
  • 5 Июля 2012 08:09
    Fynjy
    За плагин спасибо, но когда много символов в строке, то получается сильно большой междустрочный интервал... Как с этим бороться?
  • 10 Февраля 2013 18:17
    Юрий130452
    Спасибо, все класно! Только IE блокирует активное содерхимое. Как в html коде ему указать, чтобы он не блокировал.
  • 18 Февраля 2013 20:18
    kyrkan
    Подскажите! куда добавлять плагин ?
  • 27 Апреля 2014 04:11
    Sidorenko2217
    офигеть ))
  • 16 Мая 2014 16:41
    abraaa
    идеальный...пожалуй заберу его на эксплуатацию))благодарю!
^ Наверх ^