3D карусель изображений

Данный вариант карусели не требует каких либо плагинов и занимает всего 2.5кб (CSS + JS)

Прницип работы данной карусели заключается в том, что все изображения в ней равномерно размещаются по кругу:

А далее происходит ее движение в одну или другую сторону

Примеры:

3 фотографии:

6 фотографий:

10 фотографий:

10 фотографий с промежутком 20px:

12 фотографий с промежутком 20px и скрытыми задними:

Установка:

HTML:

<div class="carousel-3d">
	<figure>
		<div><a href="#any"><img src="photo-1.jpg" alt=""/></a></div>
		<div><a href="#any"><img src="photo-2.jpg" alt=""/></a></div>
		...
		<div><a href="#any"><img src="photo-10.jpg" alt=""/></a></div>
	</figure>
	<nav>
		<button class="nav prev">Назад</button>
		<button class="nav next">Вперед</button>
	</nav>
</div>

...

</figure>

<nav>

<button class="nav prev">Назад</button>

<button class="nav next">Вперед</button>

</nav>

</div>

Для добавления промежутков между фотографиями для блока карусели используется атрибут data-gap, например:

<div class="carousel-3d" data-gap="20"> (расстояние 20 пикселей)

Чтобы скрыть тыловые фотографии используется атрибут data-bfc, например:

<div class="carousel-3d" data-bfc>

CSS:

.carousel-3d {
	padding: 20px;
	-webkit-perspective: 500px;
	perspective: 500px;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}
.carousel-3d > * {
	flex: 0 0 auto;
}
.carousel-3d figure {
	margin: 0;
	width: 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
}
.carousel-3d figure img,
.carousel-3d figure div {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
}
.carousel-3d figure img {
	user-select: none;
}
.carousel-3d figure div:not(:first-of-type),
.carousel-3d figure img:not(:first-of-type) {
	position: absolute;
	left: 0;
	top: 0;
}
.carousel-3d nav {
	display: flex;
	justify-content: center;
	margin: 20px 0 0;
}
.carousel-3d nav button {
	flex: 0 0 auto;
	margin: 0 5px;
	cursor: pointer;
	color: #337AB7;
	background: #BFE2FF;
	border: 1px solid #337AB7;
	padding: 5px 10px;
	font-weight: bold;
	transition: all .3s ease;
}
.carousel-3d nav button:hover {
	color: #FFF;
	background: #337AB7;
}

.carousel-3d {

padding: 20px;

-webkit-perspective: 500px;

perspective: 500px;

display: flex;

flex-direction: column;

align-items: center;

overflow: hidden;

}

.carousel-3d > * {

flex: 0 0 auto;

}

.carousel-3d figure {

margin: 0;

width: 50%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

transition: -webkit-transform 0.5s;

transition: transform 0.5s;

transition: transform 0.5s, -webkit-transform 0.5s;

}

.carousel-3d figure img,

.carousel-3d figure div {

width: 100%;

box-sizing: border-box;

padding: 0;

}

.carousel-3d figure img {

user-select: none;

}

.carousel-3d figure div:not(:first-of-type),

.carousel-3d figure img:not(:first-of-type) {

position: absolute;

left: 0;

top: 0;

}

.carousel-3d nav {

display: flex;

justify-content: center;

margin: 20px 0 0;

}

.carousel-3d nav button {

flex: 0 0 auto;

margin: 0 5px;

cursor: pointer;

color: #337AB7;

background: #BFE2FF;

border: 1px solid #337AB7;

padding: 5px 10px;

font-weight: bold;

transition: all .3s ease;

}

.carousel-3d nav button:hover {

color: #FFF;

background: #337AB7;

}

JavaScript:

window.addEventListener("load", () => {
	var carousels = document.querySelectorAll(".carousel-3d");
	for (var i = 0; i < carousels.length; i++) {
		carousel(carousels[i]);
	}
});
function carousel(root) {
	var figure = root.querySelector("figure"),
    nav = root.querySelector("nav"),
    images = figure.children,
    n = images.length,
    gap = root.dataset.gap || 0,
    bfc = "bfc" in root.dataset,
    theta = 2 * Math.PI / n,
    currImage = 0;
	setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
	window.addEventListener("resize", () => {
		setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
	});
	setupNavigation();
	function setupCarousel(n, s) {
		var apothem = s / (2 * Math.tan(Math.PI / n));
		figure.style.transformOrigin = `50% 50% ${-apothem}px`;
		for (var i = 0; i < n; i++) images[i].style.padding = `0 ${gap}px`;
		for (i = 0; i < n; i++) {
			images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
			images[i].style.transform = `rotateY(${i * theta}rad)`;
		}
		if (bfc)
		for (i = 0; i < n; i++) images[i].style.backfaceVisibility = "hidden";
		rotateCarousel(currImage);
	}
	function setupNavigation() {
		nav.addEventListener("click", onClick, true);
		function onClick(e) {
			e.stopPropagation();
			var t = e.target;
			if (t.tagName.toUpperCase() != "BUTTON") return;
			if (t.classList.contains("next")) {
				currImage++;
				} else {
				currImage--;
			}
			rotateCarousel(currImage);
		}
	}
	function rotateCarousel(imageIndex) {
		figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
	}
	var xClick;
	var mouseDown;
	/* Смена слайдов мышкой */	
	figure.onmousedown = (event) => {
		xClick = event.pageX;
		mouseDown = true;
	};
	figure.onmouseup = (event) => {
		mouseDown = false;
	};	
	figure.onmousemove = (event) => {
		if (mouseDown) {
			var xMove = event.pageX;
			if (Math.floor(xClick - xMove) > 5) {
				currImage++;
				rotateCarousel(currImage);
				mouseDown = false;
			}
			else if (Math.floor(xClick - xMove) < -5) {
				currImage--;
				rotateCarousel(currImage);
				mouseDown = false;
			}
		}
	};
	/* Смена слайдов пальцем */	
	figure.ontouchstart = (event) => {
		xClick = event.changedTouches[0].pageX;
		mouseDown = true;
	};
	figure.ontouchend = (event) => {
		mouseDown = false;
	};	
	figure.ontouchmove = (event) => {
		if (mouseDown) {
			var xMove = event.changedTouches[0].pageX;
			if (Math.floor(xClick - xMove) > 5) {
				currImage++;
				rotateCarousel(currImage);
				mouseDown = false;
			}
			else if (Math.floor(xClick - xMove) < -5) {
				currImage--;
				rotateCarousel(currImage);
				mouseDown = false;
			}
		}
	};
}

window.addEventListener("load", () => {

var carousels = document.querySelectorAll(".carousel-3d");

for (var i = 0; i < carousels.length; i++) {

carousel(carousels[i]);

}

});

function carousel(root) {

var figure = root.querySelector("figure"),

nav = root.querySelector("nav"),

images = figure.children,

n = images.length,

gap = root.dataset.gap || 0,

bfc = "bfc" in root.dataset,

theta = 2 * Math.PI / n,

currImage = 0;

setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));

window.addEventListener("resize", () => {

setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));

});

setupNavigation();

function setupCarousel(n, s) {

var apothem = s / (2 * Math.tan(Math.PI / n));

figure.style.transformOrigin = `50% 50% ${-apothem}px`;

for (var i = 0; i < n; i++) images[i].style.padding = `0 ${gap}px`;

for (i = 0; i < n; i++) {

images[i].style.transformOrigin = `50% 50% ${-apothem}px`;

images[i].style.transform = `rotateY(${i * theta}rad)`;

}

if (bfc)

for (i = 0; i < n; i++) images[i].style.backfaceVisibility = "hidden";

rotateCarousel(currImage);

}

function setupNavigation() {

nav.addEventListener("click", onClick, true);

function onClick(e) {

e.stopPropagation();

var t = e.target;

if (t.tagName.toUpperCase() != "BUTTON") return;

if (t.classList.contains("next")) {

currImage++;

} else {

currImage--;

}

rotateCarousel(currImage);

}

function rotateCarousel(imageIndex) {

figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;

}

var xClick;

var mouseDown;

/* Смена слайдов мышкой */

figure.onmousedown = (event) => {

xClick = event.pageX;

mouseDown = true;

};

figure.onmouseup = (event) => {

mouseDown = false;

};

figure.onmousemove = (event) => {

if (mouseDown) {

var xMove = event.pageX;

if (Math.floor(xClick - xMove) > 5) {

currImage++;

rotateCarousel(currImage);

mouseDown = false;

}

else if (Math.floor(xClick - xMove) < -5) {

currImage--;

rotateCarousel(currImage);

mouseDown = false;

}

};

/* Смена слайдов пальцем */

figure.ontouchstart = (event) => {

xClick = event.changedTouches[0].pageX;

mouseDown = true;

};

figure.ontouchend = (event) => {

mouseDown = false;

};

figure.ontouchmove = (event) => {

if (mouseDown) {

var xMove = event.changedTouches[0].pageX;

if (Math.floor(xClick - xMove) > 5) {

currImage++;

rotateCarousel(currImage);

mouseDown = false;

}

else if (Math.floor(xClick - xMove) < -5) {

currImage--;

rotateCarousel(currImage);

mouseDown = false;

}

};

}

Автор карусели и оригинальная статья: Giulio Mainardi

Я добавил смену слайдов пальцем или мышкой и обернул фотографии в тег <div></div> для больших возможностей, например, для добавления ссылки или текста на изображение.

Автоматическое вращение карусели:

Для того, чтобы карусель вращалась и останавливалась при заходе курсора, ниже функции rotateCarousel добавляем:

let cur;
function showcur() {
	cur = setInterval(function() {
		currImage++;
		rotateCarousel(currImage);
	}, 2000);
}
function clearcur() {
	clearInterval(cur);
}
root.onmouseover  = function() {
	clearcur();
}  
root.onmouseout  = function() {
	showcur();
} 	
showcur();

let cur;

function showcur() {

cur = setInterval(function() {

currImage++;

rotateCarousel(currImage);

}, 2000);

}

function clearcur() {

clearInterval(cur);

}

root.onmouseover = function() {

clearcur();

}

root.onmouseout = function() {

showcur();

}

showcur();

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

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

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

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

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

Слайдер с точками

Слайдер с точками (горизонтальными линиями) на jQuery

Наклонная галерея

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

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

Скрипт на jQuery и jQuery UI для смены одной фотографии на другую

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

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

Богдан: 13.09.2024 в 21:09

Пока был html и css вникал в код. Когда же пошёл js... Сначала ничего не хотело работать, начал паниковать, читать комменты. Потом пошёл перепроверять код: 1 - я забыл вообще подключить js файл, 2 - забыл поменять название класса в js-коде (хотя я его менял, хз). Радости не было предела когда всё заработало. Теперь меня интересует одно - у вас есть наверху в навигационной панели кнопка "услуги", когда на неё наводишь всплывает список. Подскажите пожалуйста как сделать так же))

Ответить
Kani: 25.01.2024 в 21:29

супер карусель спасибо большое))

Ответить
Иван: 31.05.2023 в 20:42

А вот есть у кого возможность, подсказать как написать код для кружков (подсчет картинок в карусели+переход по ним), например как https://l-pak.ru/

Ответить
- Alexander: 05.06.2023 в 11:20
  
  В принципе можно, но это будет именно написать, а не подсказать 🙂
  А вообще это изобретение велосипеда уже, намного проще использовать готовые библиотеки для этого, как в случае с этим сайтом, где используется swiper
  
  Ответить
Денис: 05.01.2023 в 16:01

Подскажите как можно сделать в коде JS что бы на пк можно было мышкой листать слайдер, а на телефоне пальцем? Может кто подсказать?

Ответить
- Alexander: 07.01.2023 в 12:22
  
  Попробуйте по аналогии с Смена слайдов мышкой или пальцем на Bootstrap 3
  
  Ответить
  - Денис: 08.01.2023 в 21:48
    
    Непонятно как соединить с этой каруселью, карусель сама работает, а вот что где менять для работы от мышки и пальца для этой карусели без понятия, в JS не разбираюсь, может кто подскажет?
    
    Ответить
    - Alexander: 09.01.2023 в 10:48
      
      Через пару дней скину код, после НГ аврал тут целый по работе 🙂
      
      Ответить
      - Денис: 09.01.2023 в 13:40
        
        Благодарю, буду ждать с нетерпением! :))
        
        Ответить
    - Alexander: 11.01.2023 в 10:12
      
      Обновил код, проверьте
      
      Ответить
      - Денис: 11.01.2023 в 11:18
        
        Благодарю! Все работает!
        
        Ответить
Константин: 17.01.2022 в 19:30

Спасибо. Интересно. Но я по кодам полный чайник. Можете показать куда именно вставлять коды. и где должны быть размещены картинки что бы они считывались. Я учитель физкультуры и понадобилось поработать с сайтом

Ответить
- Alexander: 17.01.2022 в 19:48
  
  Ну я так даже не подскажу...
  От сайта все зависит, что куда и как там...
  
  Ответить
Татьяна: 28.12.2021 в 18:34

Здравствуйте,данный код не работает в таплинке(

Ответить
- Alexander: 28.12.2021 в 20:06
  
  Ну тут 2 варианта, либо вы что то не так делаете, либо таплинк это не позволяет.
  Не забывайте, что там вы не владелец сайта со всеми правами, а всего лишь пользователь ресурса.
  
  Ответить
  - Татьяна: 07.01.2022 в 15:39
    
    возможно(
    
    Ответить
Дмитрий: 26.06.2021 в 19:09

Добрый день. у меня фотографии разных размеров (имею ввиду часть 16:9, другая к примеру 4:3, некоторые 9:16 (вертикальные)), не подскажите пожалуйста как сделать что бы они все были строго по центру, и не перекрывали кнопки навигации?

Ответить
- Alexander: 27.06.2021 в 18:37
  Добавить:
  
  .carousel-3d figure div { display: flex; height: 100%; align-items: center; }
  
  И первую фотку ставить самую высокую.
  Или высоту указывать не 100%, а конкретную.
  
  Еще можно указать конкретную высоту для фоток и обрезать через object-fit
  Ответить
Мирослав: 11.06.2021 в 10:10

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

Ответить
- Мирослав: 11.06.2021 в 10:14
  
  И чтобы, при убирании со слайда курсора мыши, карусель возобновляла вращение
  
  Ответить
  - Alexander: 15.06.2021 в 11:58
    
    Добавил код в заметку
    
    Ответить
    - Мирослав: 04.07.2021 в 14:15
      
      Спасибо, Александр! Признателен за Ваш труд
      
      Ответить
Константин: 20.04.2021 в 11:50

Шикарная каруселька!!! Долго такую искал... Только маленькое но.... Что то под safari совсем не хочет работать. Два дня голову ломаю. https://borodinfoto.ru/useful.html
help!!!

Ответить

Андрей: 04.04.2021 в 14:54

А как кнопки назад и вперёд поставить слева и справа а не внизу?

Ответить

Alexander: 04.04.2021 в 15:33

Вместо:

.carousel-3d nav
.carousel-3d nav button

Ставим:

.carousel-3d nav button {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 10px;
	cursor: pointer;
	color: #337AB7;
	background: #BFE2FF;
	border: 1px solid #337AB7;
	padding: 5px 10px;
	font-weight: bold;
	transition: all .3s ease;
}
.carousel-3d nav button.next {
	left: auto;
	right: 10px;
}

Ответить

Андрей: 04.04.2021 в 16:09

Огромное спасибо

Ответить

PiVirus: 26.03.2021 в 23:47

Приветствую! Не пробовал повернуть карусель, сделать ее не горизонтальной а вертикальной, и прокручивалась вверх или вниз? Или это реализовано и я слепой? :))

Ответить
Алексей: 24.03.2021 в 17:02

Подскажите, как сделать чтобы карусель начинала показ не с первой картинки. Если указать currImage то получается автопрокрутка до элемента, можно сделать без прокрутки, чтобы сразу показывался указанный элемент.

Ответить
- Alexander: 24.03.2021 в 17:34
  
  А не проще ли поставить нужную картинку первой? 🙂
  
  Ответить
  - Алексей: 24.03.2021 в 17:49
    
    У меня идет генерация элементов в зависимости от полученного контента. И если я нахожусь на n-ой позиции и произошло обновление то происходит прокрутка с 0 эл. до n элемента на котором я находился.
    
    Ответить
    - Alexander: 24.03.2021 в 18:33
      
      Ну это уже смотреть надо и пробовать.
      У автора этой карусели не написано?
      Там отличная статья с примерами и т.д.
      
      Ответить
    - Alexander: 24.03.2021 в 18:49
      
      Если правильно понял, то убираем из стилей
      
      transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s;
      
      В скриптах ставим:
      
      currImage = 5;
      
      И добавляем внимацию поворота по клику ( function onClick(e) )
      
      document.querySelector(".carousel-3d figure").style.transition = "transform 0.5s";
      
      Ответить
  - Алексей: 26.03.2021 в 18:20
    
    Сделал карусель ((( а на мобильном не работает центр вращения передняя картинка
    
    Ответить
Дмитрий: 17.03.2021 в 18:25

Замечательная штука. Подскажите, а как сделать зум картинки при клике? пытался посмотреть в исходниках https://codepen.io/dudleystorey/pen/sntEk но к сожалению здесь было переделано в div'ы, так что не получается переделать, знаний не хватает((((

Ответить
- Alexander: 18.03.2021 в 06:34
  Так я тут и менял как раз для зума такого 🙂
  Подключайте любую модальную галерею, например, fancybox и прописывайте ссылку.
  
  Итого будет:
  
  <div><a data-fancybox="gallery" href="/photo-big-1.jpg"><img src="photo-1.jpg" alt=""/></a></div>
  
  Для других гелерей соотв. как то иначае
  Ответить
  - Дмитрий: 18.03.2021 в 21:52
    
    fancybox это конечно крутая штука, но слишком нагружать тоже не очень хочется, поэтому я хотел чисто что бы зум был, просто при клике картинка на 15-20% увеличивалась. Здесь 3D Gallery II человек делает через css и меняет класс у картинки в целом c current на focus, соответственно она увеличивается в зависимости от css, а подключать отдельную галерею, имею такую крутую карусель не хотелось бы. плюс у вас в коде каждой фотке уже проставлена ссылка как #any, вот я и думал что возможно можно сделать так же, через изменения стиля и чисто небольшой зум) а не целая галерея)) в любом случае спасибо, я еще покумекаю как это лучше провернуть, и если не получится, тогда буду цеплять целую галерею (что не оч хотелось бы(( )
    
    Ответить
    - Alexander: 19.03.2021 в 01:19
      
      Ну там другой человек делает и это другое решение.
      Я, например, не понимаю зачем увеличивать фото на 10-20% и мое решение иное.
      
      Ответить
      - Дмитрий: 21.03.2021 в 01:18
        
        То что вы сделали, это действительно круто, и большое спасибо)))
        эту карусель я использую для блока с отзывами из инстаграма. там все фото это скрины с телефона (пока добавил ~50, буду менять каждый месяц наверное, так то их больше), они все вертикальные, а делать слишком большим блок не хочется, и сделал его в 330px, из за этого не на всех фотографиях видно что пишут люди, в итоге рационально использование зумирования при клике, не намного, но так что бы человек смог прочитать отзыв реального человека. в итоге не додумался как сделать, и подключил как вы и предлагали FANCYBOX )))
        
        Ответить
Евгения: 18.01.2021 в 00:13

подскажите, как можно изменить размер карусели? сделать ее больше?

Ответить
- Alexander: 18.01.2021 в 09:15
  .carousel-3d figure { width: 50%; }
  Ответить
Елена: 15.10.2020 в 08:13

И правда, так и напрашивается (даже в этом логическое завершение карусели) вместо кнопок применить боковые фото для навигации. Все подобные карусели с кнопками. А это было бы ново... Но, код просто ужасно запутанный, чтобы как-то это сделать. Я бы с удовольствием применила с таким вот ноу-хау !

Ответить
Александр: 12.06.2020 в 10:48

Спасибо! Выручили новичка) Просто, удобно и адаптивно. А не подскажите, как реализовать прокрутку при клике на фото, а не по кнопке? Теоретически я понимаю, что нужно получить картинки в переменную, навесить на них прослушивальщик, потом, наверное, запустить rotateCarousel, что-то передав функции в аргументе, но практически не могу пока сообразить, как это состыковать с исходным кодом.

Ответить
- Alexander: 12.06.2020 в 18:30
  
  Да нет, зачем так сложно.
  Определить фотку что в центре и на боковые повесить currImage++ и currImage--
  
  Ответить
- Alexander: 12.06.2020 в 20:02
  
  А если нужно просто поворачивать карусель по клику по ней, то еще проще, повесьте событие не на кнопку а на нее
  
  Ответить
Татьяна: 07.05.2020 в 12:44

Очень классная карусель. А как ее сделать автоматической, чтобы сама поворачивалась?

Ответить
- Alexander: 07.05.2020 в 13:46
  Попробуйте ниже функции
  
  function rotateCarousel(imageIndex) { figure.style.transform = `rotateY(${imageIndex * -theta}rad)`; }
  
  добавить:
  
  window.setInterval(function() { currImage++; rotateCarousel(currImage); }, 2000);
  
  2000 - это 2 секунды
  Ответить
  - М.: 31.01.2021 в 21:46
    
    Крутится как вентилятор
    
    Ответить

Примеры:

3 фотографии:

6 фотографий:

10 фотографий:

10 фотографий с промежутком 20px:

12 фотографий с промежутком 20px и скрытыми задними:

Установка:

HTML:

CSS:

JavaScript:

Автоматическое вращение карусели:

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

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

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