Плагин 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 последних добавленных файлов в рубрике"Скрипты"
-
Плагин для создания круговых обзорных изображений с управлением курсором
ThreeSixty - плагин jQuery для создания из серии изображений кругового обзорного представления, которое управляется с помощью мыши или курсора.
-
Набор стилей для чекбоксов
9 наборов правил для оформления чекбоксов на страницах и формах веб проекта.
-
Выскальзывающие счетчики категорий
Набор правил CSS для формирования выскальзывающих ярлыков с количеством записей в категории или метке.
-
Круглый элемент управления на CSS
Набор правил и разметка для организации оригинального элемента управления для веб проекта.
-
CSS код индикатора загрузки
Интересный индикатор загрузки, сделанный без использования изображений и JavaScript.