Плагин jQuery - Circular content carousel

В данном материале представлена бесконечная карусель содержания. Идея заключается в организации панелей, которые можно вращать бесконечно влево или вправо (по кругу). При нажатии на ссылку "Больше..." соответствующая панель сдвигается к левой стороне окна просмотра и выдвигается область содержания. Теперь можно перемещаться по карусели, которая содержит раскрытые пункты. Нажатие на крестик закрывает область содержания и возвращает карусель к первоначальному виду.

HTML разметка

Структура карусели состоит из основного контейнера и контейнера пунктов. Каждый пункт содержит два раздела - панель и область содержания.

<div id="ca-container" class="ca-container">
	<div class="ca-wrapper">
		<div class="ca-item ca-item-1">
			<div class="ca-item-main">
				<div class="ca-icon"></div>
				<h3>Заголовок панели</h3>
				<h4>
					<span class="ca-quote">“</span>
					<span>Текст панели ...</span>
				</h4>
					<a href="#" class="ca-more">Больше...</a>
			</div>
			<div class="ca-content-wrapper">
				<div class="ca-content">
					<h6>Заголовок области содержания</h6>
					<a href="#" class="ca-close">Закрыть</a>
					<div class="ca-content-text">
						<p>Текст области содержания ...</p>
					</div>
					<ul>
						<li><a href="#">Читать еще</a></li>
						<li><a href="#">Поделиться</a></li>
						<li><a href="#">Вступить в клуб</a></li>
						<li><a href="#">Стать спонсором</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="ca-item ca-item-2">
			...
		</div>
		...
	</div><!-- ca-wrapper -->
</div><!-- ca-container -->

Первоначальный вид карусели:

Первоначальный вид карусели

После нажатия на ссылку "Больше...", открывается область содержания:

Область содержания

 

Опции и значения по умолчанию

Плагин карусели имеет следующие опции:

$('#ca-container').contentcarousel({
	// Скорость анимации проскальзывания
	sliderSpeed		: 500,
	// Эффект анимации проскальзывания
	sliderEasing	: 'easeOutExpo',
	// Скорость анимации открытия/закрытия пункта
	itemSpeed		: 500,
	// Скорость анимации открытия/закрытия пункта
	itemEasing		: 'easeOutExpo',
	// Количество пунктов для прокручивания за один шаг
	scroll			: 1
});

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

 

 

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

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

^ Наверх ^