Красивая 3D карусель, которая управляется зажатием и движением мышки.

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

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

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

Пример:

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>

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 }
#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;
};

Где:

• 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);
};