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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 18 Августа 2011 09:22
    justik
    спасибо
  • 18 Августа 2011 11:54
    npobolka
    Супер. то что нужно))) вы молодцы
  • 18 Августа 2011 16:05
    DarkRaveN
    Отлично! Забираю!
  • 18 Августа 2011 20:44
    bjack
    я тоже возьму. С помощью этой штуки можно делать сайт вообще без меню, что очень упрощает функционал.
  • 31 Декабря 2011 19:17
    Massaget
    Хочу на одной странице установить 2 таких скрипта. Или даже 3. Но 2ой почему-то выходит в виде таблицы а не слайдера. Подскажите, пожалуйста, как исправить?
    • 24 Марта 2012 18:51
      pocherk
      Скорее всего глюк из-за того, что ты 2 раза подключаешь основное ядро jQuery 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
      На одной странице даже если ты используешь несколько скриптов, jQuery подкючается всего один раз
  • 22 Мая 2012 03:25
    pantera
    Спасибо!!! Здоровски украшает и улучшает сайт. Я уже сделала модуль для Joomla 1.5 для него :)
    • 6 Марта 2013 09:50
      MADMAN22
      А где можно взять для joomla 1.5
  • 28 Декабря 2012 18:16
    DeepSea
    Ребят, а как бы добавить автопрокрутку к этому делу?
    • 21 Августа 2013 19:31
      lexexpert
      В файле jquery.contentcarousel.js на 242 строчке вставьте следующий код: [CODE] setInterval(function() { if( cache.isAnimating ) return false; cache.isAnimating = true; aux.navigate( 1, $el, $wrapper, settings, cache ); },2000); [/CODE]
      • 25 Августа 2013 20:52
        advi
        Листает только первый слайд, а потом ничего...(
  • 19 Января 2013 16:32
    ZakDak
    а как ее поставить на сайт? объясните для чайников
  • 17 Апреля 2013 16:46
    elen_shikova
    Все отлично, спасибо, а как сделать 4 в ряд, а не 3, частично сделала, ноесть один маленький глючок
  • 23 Апреля 2013 15:25
    ibra
    ребята а как его установить кто объяснит
  • 12 Июня 2013 14:33
    lanaun
    Подскажите, как его установить на WP?
  • 17 Января 2014 21:57
    vaciliu1
    подскажите как сделать больше трех а то увеличением ширины контейнера как то не так выходит при раскрытии открываются все контейнеры и смотрится невзрачно в жава скрипте в пункте if( cache.expanded ) { scroll = 1; // scroll всегда равен в режиме полного просмотра factor = 3; // ширина увеличенног пункта в 3 раза больше ширины свернутого пункта idxClicked = cache.idxClicked; // Индекс выбранного пункта } увеличение фактора не помогает
  • 18 Февраля 2014 03:00
    m4gz
    Не могу найти как отрубить скролл колесиком, удаляю поключения скрипта jquery.mousewheel но ничего не меняется, странно, подскажите а то не охота все скрипты( нашел решение удаляем в jquery.contentcarousel с 227 по 239 строки
  • 18 Февраля 2014 20:49
    m4gz
    Столкнулся с такой проблемой - вставляю в страницу вордпресса, и при прокрутки назад элементы пропадают из html, причем при прокрутке вперед все ок, а вот назад они затераются, уж не знаю где искать помогите(( нашел баг, если зум экрана не 100% элемент стерается
  • 27 Мая 2014 03:44
    ezet
    Если у кого-то будет конфликт между скриптами, то попробуйте удалить строчки плана "<script src=".../..../jquery-1.9.1.min.js"></script> и оставьте только <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>, если не заработает ,то поменяйте с 1.6.2 на 1.8.3 (мне помогло) или на другие (смотрите на существующие)
  • 1 Октября 2014 09:25
    denisov_bugulma
    Автоматическую прокрутку как поставить? Способ указанный ранее не помог
  • 28 Сентября 2015 13:06
    Serg1955
    Сайт жив .... или???? Вопрос в тему: никакие настройки прокрутки не работают! Ребят, ну может у кого получилось? Помогите....
^ Наверх ^