3D-карусель управляемая мышью

ВКонтакте | Telegram

Возможности карусели:

Любое количество фотографий.
Произвольный радиус.
Автоматическое движение с заданной скоростью.
Отсутствие дополнительных библиотек.
Всего 90 строк кода.

Более подробно о настройках и вариантах карусели описано внизу страницы.

Пример:

Увеличение фотографий в модальных окнах в данное решение не входит и используется только для примера.

3D Carousel

HTML:

Количество фотографий может быть любое.

<div id="carousel">
    <div id="drag-container">
		<div id="spin-container">
			<a href="/photo-large.jpg"><img src="/photo-small.jpg" alt="" /></a>
			<!-- Еще фото -->
			<a href="/photo-large.jpg"><img src="/photo-small.jpg" alt="" /></a>
			<p>3D Carousel</p>
		</div>
		<div id="ground"></div>
	</div>
</div>

<p>3D Carousel</p>

</div>

</div>

CSS:

#carousel  {
	touch-action: none;
	display: flex;
	height: 400px;
	perspective: 1000px;
	transform-style: preserve-3d;
}
#drag-container,
#spin-container {
	position: relative;
	display: flex;
	margin: auto;
	transform-style: preserve-3d;
	transform: rotateX(-10deg);
}
#drag-container a {
	transform-style: preserve-3d;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 10px 16px rgba(0,0,0,0.1);
	border: 8px solid #BFE2FF;
}
#drag-container img {
	width: 100%;
	height: 100%;
	filter: grayscale(50%) contrast(0.8);
	transition: filter 0.3s;
}	 
#drag-container a:hover img{
	filter: grayscale(0) contrast(1);
}		  
#drag-container p {
	line-height: 1;
	font-size: 50px;
	font-weight: bold;
	text-align: center;	  
	font-family: Serif;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%) rotateX(90deg);
	color: #337AB7;
	font-family: Verdana, sans-serif; 
}
#ground {
	width: 900px;
	height: 900px;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%) rotateX(90deg);
}
@keyframes spin {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}
@keyframes spinRevert {
	from {
		transform: rotateY(360deg);
	}
	to {
		transform: rotateY(0deg);
	}
}

#carousel {

touch-action: none;

display: flex;

height: 400px;

perspective: 1000px;

transform-style: preserve-3d;

}

#drag-container,

#spin-container {

position: relative;

display: flex;

margin: auto;

transform-style: preserve-3d;

transform: rotateX(-10deg);

}

#drag-container a {

transform-style: preserve-3d;

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 10px 16px rgba(0,0,0,0.1);

border: 8px solid #BFE2FF;

}

#drag-container img {

width: 100%;

height: 100%;

filter: grayscale(50%) contrast(0.8);

transition: filter 0.3s;

}

#drag-container a:hover img{

filter: grayscale(0) contrast(1);

}

#drag-container p {

line-height: 1;

font-size: 50px;

font-weight: bold;

text-align: center;

font-family: Serif;

position: absolute;

top: 100%;

left: 50%;

transform: translate(-50%, -50%) rotateX(90deg);

color: #337AB7;

font-family: Verdana, sans-serif;

}

#ground {

width: 900px;

height: 900px;

position: absolute;

top: 100%;

left: 50%;

transform: translate(-50%, -50%) rotateX(90deg);

}

@keyframes spin {

from {

transform: rotateY(0deg);

}

to {

transform: rotateY(360deg);

}

@keyframes spinRevert {

from {

transform: rotateY(360deg);

}

to {

transform: rotateY(0deg);

}

JS:

let radius = 240; 
let autoRotate = true;
let rotateSpeed = -60; 
let imgWidth = 140; 
let imgHeight = 205;
setTimeout(init, 300);
let odrag = document.getElementById("drag-container");
let ospin = document.getElementById("spin-container");
let carousel = document.getElementById("carousel");
let aImg = ospin.getElementsByTagName("a");
ospin.style.width = imgWidth + "px";
ospin.style.height = imgHeight + "px";
let ground = document.getElementById("ground");
ground.style.width = radius * 3 + "px";
ground.style.height = radius * 3 + "px";
function init(delayTime) {
	for (let i = 0; i < aImg.length; i++) {
		aImg[i].style.transform =
		"rotateY(" +
		i * (360 / aImg.length) +
		"deg) translateZ(" +
		radius +
		"px)";
		aImg[i].style.transition = "transform 1s";
		aImg[i].style.transitionDelay =
		delayTime || (aImg.length - i) / 4 + "s";
	}
}
function applyTranform(obj) {
	if (tY > 180) tY = 180;
	if (tY < 0) tY = 0;
	obj.style.transform = "rotateX(" + -tY + "deg) rotateY(" + tX + "deg)";
}
function playSpin(yes) {
	ospin.style.animationPlayState = yes ? "running" : "paused";
}
let sX,
sY,
nX,
nY,
desX = 0,
desY = 0,
tX = 0,
tY = 10;
if (autoRotate) {
	let animationName = rotateSpeed > 0 ? "spin" : "spinRevert";
	ospin.style.animation = `${animationName} ${Math.abs(
	rotateSpeed
	)}s infinite linear`;
}
carousel.onpointerdown = function(e) {
	clearInterval(odrag.timer);
	e = e || window.event;
	let sX = e.clientX,
	sY = e.clientY;
	this.onpointermove = function(e) {
		e = e || window.event;
		let nX = e.clientX,
		nY = e.clientY;
		desX = nX - sX;
		desY = nY - sY;
		tX += desX * 0.1;
		tY += desY * 0.1;
		applyTranform(odrag);
		sX = nX;
		sY = nY;
	};
	this.onpointerup = function(e) {
		odrag.timer = setInterval(function() {
            desX *= 0.95;
            desY *= 0.95;
            tX += desX * 0.1;
            tY += desY * 0.1;
            applyTranform(odrag);
            playSpin(false);
            if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
				clearInterval(odrag.timer);
				playSpin(true);
			}
		}, 17);
		this.onpointermove = this.onpointerup = null;
	};
	return false;
};

let radius = 240;

let autoRotate = true;

let rotateSpeed = -60;

let imgWidth = 140;

let imgHeight = 205;

setTimeout(init, 300);

let odrag = document.getElementById("drag-container");

let ospin = document.getElementById("spin-container");

let carousel = document.getElementById("carousel");

let aImg = ospin.getElementsByTagName("a");

ospin.style.width = imgWidth + "px";

ospin.style.height = imgHeight + "px";

let ground = document.getElementById("ground");

ground.style.width = radius * 3 + "px";

ground.style.height = radius * 3 + "px";

function init(delayTime) {

for (let i = 0; i < aImg.length; i++) {

aImg[i].style.transform =

"rotateY(" +

i * (360 / aImg.length) +

"deg) translateZ(" +

radius +

"px)";

aImg[i].style.transition = "transform 1s";

aImg[i].style.transitionDelay =

delayTime || (aImg.length - i) / 4 + "s";

}

function applyTranform(obj) {

if (tY > 180) tY = 180;

if (tY < 0) tY = 0;

obj.style.transform = "rotateX(" + -tY + "deg) rotateY(" + tX + "deg)";

}

function playSpin(yes) {

ospin.style.animationPlayState = yes ? "running" : "paused";

}

let sX,

sY,

nX,

nY,

desX = 0,

desY = 0,

tX = 0,

tY = 10;

if (autoRotate) {

let animationName = rotateSpeed > 0 ? "spin" : "spinRevert";

ospin.style.animation = `${animationName} ${Math.abs(

rotateSpeed

)}s infinite linear`;

}

carousel.onpointerdown = function(e) {

clearInterval(odrag.timer);

e = e || window.event;

let sX = e.clientX,

sY = e.clientY;

this.onpointermove = function(e) {

e = e || window.event;

let nX = e.clientX,

nY = e.clientY;

desX = nX - sX;

desY = nY - sY;

tX += desX * 0.1;

tY += desY * 0.1;

applyTranform(odrag);

sX = nX;

sY = nY;

};

this.onpointerup = function(e) {

odrag.timer = setInterval(function() {

desX *= 0.95;

desY *= 0.95;

tX += desX * 0.1;

tY += desY * 0.1;

applyTranform(odrag);

playSpin(false);

if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {

clearInterval(odrag.timer);

playSpin(true);

}

}, 17);

this.onpointermove = this.onpointerup = null;

};

return false;

};

Где:

radius - Радиус карусели

autoRotate - Автоматическое вращение (true / false)

rotateSpeed - Скорость вращения

imgWidth - Ширина фотографии

imgHeight - Высота фотографии

Чтобы карусель вращалась зажатием и движением мыши в любом месте документа, а не только в ее контейнере, нужно заменитьcarousel.onpointerdown = function(e) {...} на document.onpointerdown = function(e) {...}

Если в карусели не используются ссылки, а только фотографии, то:

В HTML убираем ссылки
В CSS удаляем класс #drag-container img и заменяем #drag-container a на #drag-container img
В JS заменяем let aImg = ospin.getElementsByTagName("a"); на let aImg = ospin.getElementsByTagName("img");

У автора сделано одновременно оба варианта (с ссылкой и без), но в этом случае происходит конфликт в Firefox

Видео, которое также присутствует в оригинале, я удалил за ненадобностью, как и фоновую музыку.

Если нужно изменять радиус карусели колесом мыши, добавьте вниз скрипта:

document.onmousewheel = function(e) {
	e = e || window.event;
	let d = e.wheelDelta / 20 || -e.detail;
	radius += d;
	init(1);
};

document.onmousewheel = function(e) {

e = e || window.event;

let d = e.wheelDelta / 20 || -e.detail;

radius += d;

init(1);

};

3D Carousel на github

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Опубликовано: 01.04.2021 / Обновлено: 21.11.2022
Рубрики: Слайдеры и карусели
Метки: 3D, JavaScript
16419 просмотров

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

Диагональная карусель фотографий

Диагональная карусель фотографий управляемая движением мышки или пальца

Слайдер с диагональной сменой фотографий

Небольшой скрипт на jQuery реализующий слайдер со сменой по диагонали фотографий

Слайдер фоновых изображений Vegas

jQuery плагин Vegas, его установка, настройки, анимация, методы, события и примеры

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

Ваш комментарий отправлен!

Влад: 03.06.2025 в 23:46

Добрый вечер. Подскажите пожалуйста, как добавить видео, целый день колдую, получается картинка по кругу, а видео внутри круга крутится или наоборот. Где-то что-то упускаю, но не пойму где.

Ответить
- Alexander: 04.06.2025 в 09:06
  
  Не понял, как у вас задумано и что получилось, дайте ссылку на результат.
  
  Ответить
  - Влад: 04.06.2025 в 13:13
    
    https://vladschool.specialist-get.ru/Getvizitka
    
    Ответить
    - Alexander: 04.06.2025 в 14:34
      
      Вы убрали ссылку, и заменили [b]A[/b] на [b]IMG [/b] (как у меня написано)
      А сами вставили [b]video[/b] вместе с картинками.
      
      Верните родителя, как была ссылка, и замените ее на [b]SPAN [/b]
      И соотв. поменять в стилях и скриптах [b]A[/b] на [b]SPAN [/b]
      
      Т.е., чтобы получилось:
      [code]<span><img src="/photo-small.jpg" alt="" /></span>[/code]
      
      Ответить
      - Влад: 04.06.2025 в 15:35
        
        https://vladschool.specialist-get.ru/Getvizitka
        Вернул ваши настройки и заменил переменные на "span"
        Файл с видео теперь крутится по кругу, но не отображается и не запускается. Соответственно оно не распознается как видео.
        
        Ответить
        
        Alexander: 04.06.2025 в 15:54
        
        Вот так у вас должно быть
        [code]<div id="carousel">
        <div id="drag-container">
        <div id="spin-container">
        <span><img src="photo1.jpg" alt="" /></span>
        <span><img src="photo2.jpg" alt="" /></span>
        <span><img src="photo3.jpg" alt="" /></span>
        <span><img src="photo4.jpg" alt="" /></span>
        <span><video src="video1.mp4" autoplay loop muted></video></span>
        <span><video src="video2.mp4" autoplay loop muted></video></span>
        <p>3D Carousel</p>
        </div>
        <div id="ground"></div>
        </div>
        </div>[/code]
        
        Ответить
        
        Влад: 04.06.2025 в 16:06
        
        https://vladschool.specialist-get.ru/Getvizitka
        Теперь крутится и распознается, но масштаб не соответствует. Какая переменная отвечает за масштаб именно видео?
        
        Alexander: 04.06.2025 в 17:03
        
        Точно также как и с фото, те же стили
        Например:
        [code]#carousel video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        }[/code]
        
        Ответить
        
        Влад: 04.06.2025 в 17:31
        
        Большое спасибо!!!
        
        Alexander: 04.06.2025 в 19:13
        
        Я ошибся в классе, нужно [b]#carousel[/b], а не[del][b] .carousel[/b][/del]
        А вообще, видео для такой карусели должно быть 120х300px (или под горизонтальный формат переделать ее).
        Подумайте о размере не только в пикселях, но и мегабайтах.
        
        Ответить
        
        Влад: 04.06.2025 в 22:07
        
        Спасибо, Александр. Я заметил и исправил сразу на #. Всё работает, эффектно смотрится! Большое спасибо за помощь!
Александр: 25.03.2025 в 14:11

Отличная карусель! Заработала сразу. Хорошо объяснена. Легко настраивается. Пока только не смог изменить первоначальный вертикальный наклон, чтобы надпись на дне с самого начала просматривалась полностью. Надеюсь на подсказку. Очередная "копеечка" за мной. Спасибо!

Ответить
- Александр: 25.03.2025 в 14:24
  
  Ура! Нашёл. Параметр "transform: rotateX(-10deg)"
  
  Ответить
Валентин: 26.11.2024 в 01:59

подскажите, возможно ли сделать не ссылками а указать путь к примеру data/gallery/image/ чтоб оттуда уже подгружались фотографии сами в разнобой,i = i || " "; не пойдет так как у меня фотографии создаются по времени timestamp() .

Ответить
- Alexander: 26.11.2024 в 08:38
  
  А как у нас совпадет timestamp, который в именах файлов (создал сервер) с тем, который создался в браузере на JS ?
  На PHP сразу генерируйте HTML с нуждными фото и все.
  
  Ответить
Илья: 23.11.2024 в 15:43

Добрый день, в Firefox при увеличении радиуса, качество картинки резко падает, как будто он увеличивает уменьшенный в начале js img. Chorme и Yandex отображает нормально. Не знаете как починить?

Ответить
- Alexander: 24.11.2024 в 10:42
  
  Тут я не подскажу, так не должно быть, по идеи.
  Если картинка 1000 точек и уменьшена до 200, то при увеличении до 500, как она может остаться 200...
  Это уже тараканы браузера какие то.
  
  Ответить
Эмиль: 09.11.2024 в 13:20

Добрый день очень понравилось только вот установить не смог вот как встаёт [url="http://chatike.ru"]Чатик ФМ[/url][img]https://imgs.su/upload/675/1429015297.png[/img]

Ответить
- Alexander: 09.11.2024 в 14:17
  
  Посмотрите пути к фотографиям
  
  Ответить
Антон: 12.04.2024 в 23:06

Добрый день подскажите, можно ли сделать сразу две карусели на странице?

Ответить
- Alexander: 13.04.2024 в 08:06
  
  В этом варианте нет, нужно менять JS
  
  Ответить
Aza: 28.05.2023 в 16:56

Доброго времени суток! Могу ли использовать карусель у себя в проекте?

Ответить
Александр: 10.03.2023 в 21:07

Доброго времени суток и спасибо за контент! Как выпутаться с этим слайдером из ситуации что он разворачивается сразу. В том плане в середине страницы не будет эффекта раскидывания карт. Задержку ставить не понятно когда пользователь долистает. Это было бы идеальным решением, и возможно простым, но я до этого не допетрю)

Ответить
- Alexander: 14.03.2023 в 08:40
  
  Удаляем
  [code]setTimeout(init, 300);[/code]
  И в самый низ скрипта добавляем:
  [code]let observer = new IntersectionObserver(function (entries, obs) {
  entries.forEach(function (entry) {
  if (!entry.isIntersecting) return;
  obs.unobserve(entry.target);
  setTimeout(init, 300);
  });
  });
  observer.observe(carousel);[/code]
  
  Ответить
  - Александр: 18.03.2023 в 18:11
    
    Блин одно дело с html css ковыряться, но такое понимать это добротные мозги нужны) Сайт пушка, за помощь респект, увижу рекламу с недвижкой кликну)
    
    Ответить
Олеся: 02.02.2023 в 22:11

Добрый вечер! Как как изменить радиус карусели для мобильной версии(радиус прописан в JS

Ответить
- Alexander: 03.02.2023 в 08:35
  
  Ниже переменных, где задается радиус и размеры изображений, можно добавить:
  [code]if (window.innerWidth < 500) {
  radius = 200;
  imgWidth = 100;
  imgHeight = 160;
  }[/code]
  
  Ответить
  - Олеся: 03.02.2023 в 21:15
    
    Спасибо Вам огромное! Всё работает!!!
    
    Ответить
Владимир: 22.01.2023 в 11:20

Доброго дня. Я так понимаю часть слайдера после нажатия с паузой и т.д сделана отдельно как то. Фото просто на черном экране увеличивается.

Ответить
- Alexander: 22.01.2023 в 18:02
  
  Фото и должно так открываться.
  Тут для примера я подключил свою [i]fancybox[/i], у вас может использоваться другой лайтбокс или открываться по ссылкам не фото, а страницы.
  
  Ответить
  - Владимир: 22.01.2023 в 18:51
    
    Спасибо понятно
    
    Ответить
Юлия: 28.05.2021 в 12:48

у меня не показывает изображения, в чём может быть проблема?

Ответить
- Alexander: 28.05.2021 в 12:51
  
  Смотреть нужно, как я угодаю почему 🙂
  
  Ответить
  - Юлия: 29.05.2021 в 09:15
    
    Можно с Вами по этому вопросу как-то связаться?
    
    Ответить
    - Alexander: 29.05.2021 в 19:17
      
      Напишите в ВК или Телеграм завтра.
      [url="https://atuin.ru/contacts/"]Контакты[/url]
      
      Ответить
Alex: 20.05.2021 в 10:08

Прикольно!

Ответить
PiVirus: 02.04.2021 в 20:36

Шикарная карусель! Как всегда контент топовый у тебя 🙂

Ответить

Пример:

HTML:

CSS:

JS:

Где:

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

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

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