3D карусель Cloud 9 Carousel

Установка
Пример 1
Пример 2

Настройки
Методы
Колбеки

Установка:

Подключаем jQuery 1.3.0 (или выше) или Zepto 1.1.1 (или выше)
Подключаем jquery.cloud9carousel.js или jquery.cloud9carousel.min.js
Инициализируем $(element).Cloud9Carousel(option). Подробнее см. примеры и настройки.

Пример 1:

Пример с минимальными кодами и настройками

<div id="cloud9">
	<img class="cloud9-item" src="/demo/icons/1.png" alt="" />
	<!-- Элементы карусели -->
	<img class="cloud9-item" src="/demo/icons/12.png" alt="" />
</div>

</div>

#cloud9 {
	overflow: visible !important;
	height: 170px;
	margin-top: 20px;
}
.cloud9-item {
	filter: drop-shadow(0 4px 6px #666);
	cursor: pointer;
}

#cloud9 {

overflow: visible !important;

height: 170px;

margin-top: 20px;

}

.cloud9-item {

filter: drop-shadow(0 4px 6px #666);

cursor: pointer;

}

$(function() {
	$("#cloud9").Cloud9Carousel( {
		bringToFront: true
	});
})

$(function() {

$("#cloud9").Cloud9Carousel( {

bringToFront: true

});

})

Пример 2:

Модальные окна в этот скрипт не входят (они от сайта). Я их добавил, чтобы было понятнее как работают ссылки на элементах карусели. А именно: клик по элементу перемещает карусель на него, а клик по ссылке элемента перемещает карусель и открывает ее.

Заголовок

Описание блока

Заголовок

Описание блока

Заголовок

Описание блока

Заголовок

Описание блока

Заголовок

Описание блока

Заголовок

Описание блока

<div id="showcase">
	<div class="card">
        <h5>Заголовок</h5>
		<a class="fancybox" href="/demo/640/fantasy-1.jpg"><img src="/demo/640/fantasy-1.jpg" alt="" /></a>
        <p>Описание блока</p>
	</div>
	<!-- Элементы карусели -->
	<div class="card">
        <h5>Заголовок</h5>
		<a class="fancybox" href="/demo/640/fantasy-6.jpg"><img src="/demo/640/fantasy-6.jpg" alt="" /></a>
        <p>Описание блока</p>
	</div>
</div>
<div class="wr-snav">
	<button class="snav snav-left">
		&lt;
	</button>
	<button class="snav snav-right">
		&gt;
	</button>
</div>

<h5>Заголовок</h5>

<p>Описание блока</p>

</div>

<h5>Заголовок</h5>

<p>Описание блока</p>

</div>

</button>

</button>

</div>

#showcase {
	overflow: visible !important;
	visibility: hidden;
	height: 290px;
}
#showcase .card {
	width: 280px;
	padding: 12px;
	text-align: center;
	background-color: rgba(191, 226, 255, 1);
	border: 4px solid rgba(51, 122, 183, 0.3);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
#showcase .card img {
	max-width: 100%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
	margin: 10px 0;
}	
#showcase .card h5 {
	margin: 0 0 7px 0;
	font-size: 24px;
}
#showcase .card p {
	font-family: Verdana, sans-serif;
	font-size: 16px;
}
.wr-snav {
	text-align: right;
}
.snav {
	width: 64px;
	height: 64px;
	line-height: 64px;
	color: #BFE2FF;
	font: bold 30px "Lucida Grande";
	text-align: center;
	text-shadow: 0px 1px 0px #f5f5f5;
	background: #337AB7;
	border: 4px solid #BFE2FF;
	box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	margin: 0 auto;
	transition: color 0.5s;
}
.snav:hover {
	color: #FFF;
}		
.snav-left {
	border-radius: 12px 5px 5px 12px;
}
.snav-right {
	border-radius: 5px 12px 12px 5px;
}

#showcase {

overflow: visible !important;

visibility: hidden;

height: 290px;

}

#showcase .card {

width: 280px;

padding: 12px;

text-align: center;

background-color: rgba(191, 226, 255, 1);

border: 4px solid rgba(51, 122, 183, 0.3);

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

}

#showcase .card img {

max-width: 100%;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

margin: 10px 0;

}

#showcase .card h5 {

margin: 0 0 7px 0;

font-size: 24px;

}

#showcase .card p {

font-family: Verdana, sans-serif;

font-size: 16px;

}

.wr-snav {

text-align: right;

}

.snav {

width: 64px;

height: 64px;

line-height: 64px;

color: #BFE2FF;

font: bold 30px "Lucida Grande";

text-align: center;

text-shadow: 0px 1px 0px #f5f5f5;

background: #337AB7;

border: 4px solid #BFE2FF;

box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.45);

cursor: pointer;

margin: 0 auto;

transition: color 0.5s;

}

.snav:hover {

color: #FFF;

}

.snav-left {

border-radius: 12px 5px 5px 12px;

}

.snav-right {

border-radius: 5px 12px 12px 5px;

}

$(function() {
	var showcase = $("#showcase")
	showcase.Cloud9Carousel({
        yOrigin: 30,
        yRadius: 30,
        itemClass: "card",
        buttonLeft: $(".snav-left"),
        buttonRight: $(".snav-right"),
        bringToFront: true,
        onLoaded: function() {
			showcase.css('visibility', 'visible')
			showcase.fadeIn( 100 )
		}
	})
})

$(function() {

var showcase = $("#showcase")

showcase.Cloud9Carousel({

yOrigin: 30,

yRadius: 30,

itemClass: "card",

buttonLeft: $(".snav-left"),

buttonRight: $(".snav-right"),

bringToFront: true,

onLoaded: function() {

showcase.css('visibility', 'visible')

showcase.fadeIn( 100 )

}

})

Настройки:

Настройка	Описание	По умолчанию
xOrigin	Центр карусели (координата X)	(ширина контейнера / 2)
yOrigin	Центр карусели (координата Y)	(высота контейнера / 2)
xRadius	Половина ширины карусели	(ширина контейнера / 2.3)
yRadius	Половина высоты карусели	(высота контейнера / 6)
farScale	Масштаб элемента в его самой дальней точке (диапазон: от 0 до 1)	0.5
mirror	См. настройки отражения	none
transforms	Использование CSS трансформаций	true
smooth	Использование максимально эффективной частоты кадров через API requestAnimationFrame	true
fps	Кадры в секунду (если `smooth` выключен)	30
speed	Относительный коэффициент скорости карусели. Любое положительное число: 1-медленное, 4-среднее, 10-быстрое.	4
autoPlay	Автоматический поворот карусели (положительное число по часовой стрелке). Автоматическое воспроизведение не выполняется при наведении мыши на контейнер. Значение 0 означает, что автоматическое воспроизведение отключено.	0
autoPlayDelay	Задержка, в миллисекундах, между автоматическим вращением	4000
mouseWheel	Вращение карусели с помощью колесика мыши. Требуется `"mousewheel"` событие, предусмотренное плагином jQuery Mousewheel.	false
bringToFront	Поворот карусели к элементу на котором был произведен клик	false
buttonLeft	Элемент, который будет вращать карусель влево, например: `$("#button-left")`	none
buttonRight	Элемент, который будет вращать карусель вправо, например: `$("#button-right")`	none
itemClass	Атрибут класса элементов внутри контейнера карусели	"cloud9-item"
frontItemClass	Атрибут класса элемента, который ставится первым	none
handle	Строка для взаимодействия с каруселью, например: `$("#carousel").data("carousel").go(1)`	"carousel"

Настройки отражения:

Обратите внимание: reflection.js не работает на Zepto

После подключения на страницу reflection.js позволяет создавать зеркальные отражения, например:

mirror: {
  gap: 12,     /* 12 пиксельный зазор между элементом и отражением, по умолчанию 2 */
  height: 0.2, /* высота 20% от исходного изображения, по умолчанию 1/3 */
  opacity: 0.4 /* 40% прозрачность сверху отражения, по умолчанию 0.5 */
}

mirror: {

gap: 12, /* 12 пиксельный зазор между элементом и отражением, по умолчанию 2 */

height: 0.2, /* высота 20% от исходного изображения, по умолчанию 1/3 */

opacity: 0.4 /* 40% прозрачность сверху отражения, по умолчанию 0.5 */

}

Методы:

После инициализации карусели можно вызвать следующие методы. Например:

// Повернуть три элемента по часовой стрелке

	$("#carousel").data("carousel").go( 3 );

Метод	Описание
go( count )	Поворот карусели на кол-во элементов (+ по часовой стрелки, - против
goTo( index )	Поворот карусели на индекс элемента
nearestIndex()	Возвращает индекс на основе 0 элемента, ближайшего к фронтальному (целое число)
nearestItem()	Возвращает ссылку на элемент, который находится ближе всего к фронту (Item)
deactivate()	Отключает карусель (необратимо). Используется для того, чтобы остановить механизм карусели и освободить ее элементы.
itemsRotated()	Возвращает число элементов, повернутых из начальной нулевой позиции. Например, в карусели с 5 элементами, которые сделали три оборота по часовой стрелке, значение будет -15.
floatIndex()	Возвращает значение элемента в передней части карусели. Например, если нкарусель прошла на 20% мимо элемента 2 к следующему, то `floatIndex()` вернет 2.2

Колбеки:

Функции обратного вызова передаются конструктору карусели вместе с настройками. Например:

var carousel = $("#carousel")
carousel.Cloud9Carousel({
	onLoaded: function(){
		carousel.css( 'visibility', 'visible' )
		carousel.fadeIn( 100 )
	}		  
}

var carousel = $("#carousel")

carousel.Cloud9Carousel({

onLoaded: function(){

carousel.css( 'visibility', 'visible' )

carousel.fadeIn( 100 )

}

Колбек	Описание
onLoaded	Срабатывает один раз, когда карусель полностью инициализирована
onRendered	Срабатывает каждый раз при перемещении карусели
onAnimationFinished	Срабатывает, когда карусель закончила вращаться

Плагин Cloud 9 Carousel на github
Фотографии kellepics
Иконки GraphicLoads

Вячеслав: 17.05.2023 в 16:19

Добрый день. Помогите разобраться почему не работает.
https://codepen.io/V-Shushkov/pen/bGmmGJz

Ответить
Александр: 15.01.2023 в 02:23

я тоже все подключил вроде, но видны только кнопки для листания.
https://sandrbuz.github.io/venarus/

Ответить
- Alexander: 17.01.2023 в 14:10
  
  1 - сперва подключается jquery, потом jquery.cloud9carousel.js, потом уже сам скрипт из примера
  2 - пути к картинкам свои надо 🙂
  
  Ответить
Veaceslav: 22.01.2022 в 20:34

Вроде всё подключил как предложено на странице, но не работает. Видны только кнопки для для листания и всё. Есть идеи ?

Ответить
- Alexander: 23.01.2022 в 18:15
  
  Нужно ссылку видеть на результат, так сложно угадывать.
  
  Ответить
Иван: 15.02.2021 в 18:26

Почему то не работает

Ответить
Александр Санчес: 30.06.2020 в 10:36

Можно ли прикрутить touch событие, что бы карусель работала от свайпа?

Ответить
- Alexander: 01.07.2020 в 15:27
  
  У меня нет сейчас мобильника и соотв. я не могу проверить тот код который вам бы посоветовал.
  
  Ответить
Иван: 30.05.2020 в 19:36

Спасибо за карусель! Подскажите, пожалуйста, как сделать адаптивность? Весь сайт адаптируется при изменении экрана, карусель - нет.(

Ответить
- Иван: 30.05.2020 в 20:44
  
  Решил так:
  
  .showcase {
  width: 1000px;
  position: absolute;
  left: 50%;
  margin-left: -500px;
  }
  
  Ответить
- Alexander: 01.06.2020 в 05:15
  
  Она так то адаптивная, только построение карусели происходит после загрузки страницы. И если ее размер меняется, то ее ширина остается прежней.
  Но если страница изначально была загружена на узком экране, то все нормально.
  
  Ответить

Установка:

Пример 1:

Пример 2:

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Заголовок

Настройки:

Настройки отражения:

Методы:

Колбеки:

Смотрите также:

Слайдер "До" и "После"

3D слайдер с перспективой

Слайдер с меняющимися фото на CSS

Добавить комментарий:

Комментарии: