—»     —»   Карусель с вращающимся контентом на jQuery
  Раздел: Руководства, Скрипты и коды   Комментариев: 3  

Карусель с вращающимся контентом на jQuery



Сегодня мы хотим поделиться с вами простой каруселью для вращения контента. Идея заключается в том, чтобы создать несколько блоков с контентом, которые можно было бы вращать бесконечно. Кликая по ссылке «more» (больше), соответствующий блок сдвигается влево и заменяется следующим блоком с контентом. Кликая по закрывающему крестику, мы обратно задвинем расширенную область с контентом, а блоки вернутся на свои исходные позиции.

Карусель с вращающимся контентом на jQuery

Красивейший набор иконок в ZIP-архиве был разработан Cyberella, и выпущен под лицензионным соглашением Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License.

Структура кода 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>Stop factory farming</h3>
<h4>
<span class="ca-quote">“</span>
<span>Some text...</span>
</h4>
<a href="#" class="ca-more">more...</a>
</div>
<div class="ca-content-wrapper">
<div class="ca-content">
<h6>Animals are not commodities</h6>
<a href="#" class="ca-close">close</a>
<div class="ca-content-text">
<p>Some more text...</p>
</div>
<ul>
<li><a href="#">Read more</a></li>
<li><a href="#">Share this</a></li>
<li><a href="#">Become a member</a></li>
<li><a href="#">Donate</a></li>
</ul>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
...
</div>
...
</div><!-- ca-wrapper -->
</div><!-- ca-container -->

Исходный вид карусели контента:

Карусель с вращающимся контентом на jQuery

Кликнув по ссылке «more…», мы можем выдвинуть панель и сдвинуть текущий блок влево:

Карусель с вращающимся контентом на jQuery

Опции по умолчанию следующие:

$('#ca-container').contentcarousel({
// speed for the sliding animation
sliderSpeed : 500,
// easing for the sliding animation
sliderEasing : 'easeOutExpo',
// speed for the item animation (open / close)
itemSpeed : 500,
// easing for the item animation (open / close)
itemEasing : 'easeOutExpo',
// number of items to scroll at a time
scroll : 1
});

Надеемся, что вам понравился наше сегодняшнее руководство, и вы обязательно воспользуетесь им в своих проектах!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, слайд-шоу
Опубликовал Design FactoRy   Прочитано (раз): 14259   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 октября 2011 @ 15:43
Написал: krapan88 — группа: Читатели  
На сайте с: 31.01.2010   |   Публикаций: 0   |   Комментариев: 59
ICQ: --- не указано ---
классная штука. будем пробовать ее в один проект вписать. Спасибо, народ.
Комментарий #2: 4 октября 2011 @ 15:56
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
krapan88, пожалуйста. Рады были помочь.
Комментарий #3: 1 апреля 2014 @ 11:31
Написал: Давив — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте!
Данный пример работает с библиотекой jquery 1.6.2. А как его запустить с последней версией библиотеки jquery?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031