p 3D Carousel/Slider!
div.carousel
div.carousel__body
div.carousel__prev
i.far.fa-angle-left
div.carousel__next
i.far.fa-angle-right
div.carousel__slider
- items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
each val1, index in items
div.carousel__slider__item
div.item__3d-frame
div.item__3d-frame__box.item__3d-frame__box--front
h1=val1
div.item__3d-frame__box.item__3d-frame__box--left
div.item__3d-frame__box.item__3d-frame__box--right
View Compiled
:root {
--crsl-bg: transparent;
--box-bg: #1e272e;
--box-shadow: #0000001c;
--box-shadow-border: #0000000f;
--box-border: #fff;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background: rgb(47,53,57);
background: radial-gradient(circle, rgba(47,53,57,1) 0%, rgba(30,39,46,1) 100%);
background: radial-gradient(circle, rgba(47,53,57,1) 0%, rgba(30,39,46,1) 100%);
background: radial-gradient(circle, rgba(47,53,57,1) 0%, rgba(30,39,46,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2f3539",endColorstr="#1e272e",GradientType=1);
* {
font-family: 'Source Sans Pro', sans-serif;
}
> p {
font-size: .95em;
font-weight: bold;
position: absolute;
top: 7.5%;
width: 100%;
letter-spacing: 4px;
text-transform: uppercase;
text-align: center;
color: white;
user-select: none;
}
> .carousel {
padding-top: 125px;
}
}
.carousel {
position: relative;
display: block;
width: 100%;
box-sizing: border-box;
&__prev, &__next {
position: absolute;
bottom: -15%;
transition: transform 0.25s ease;
i {
font-size: 60px;
color: var(--box-border);
cursor: pointer;
}
}
&__prev:hover, &__next:hover {
transform: scale(1.25);
}
&__prev { left: 40%; }
&__next { right: 40%; }
&__body {
width: 100%;
padding: 20px 0 50px 0;
overflow: hidden;
.carousel__slider {
position: relative;
transition: transform 1s ease-in-out;
background: var(--crsl-bg);
&__item {
position: relative;
display: block;
float: left;
box-sizing: border-box;
margin-left: 20px;
margin-right: 20px;
.item__3d-frame {
position: relative;
width: 100%;
height: 100%;
transition: transform 1s ease-in-out;
transform-style: preserve-3d;
transform-style: preserve-3d;
&:after {
content: '';
position: absolute;
bottom: -15%;
width: 100%;
height: 40px;
background: var(--box-shadow);
box-shadow: 0px 0px 5px 5px var(--box-shadow);
transform: rotateX(90deg) translate3d(0px, -20px, 0px);
opacity: 0.85;
}
&__box {
display: flex;
align-items: center;
vertical-align: middle;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border-color: var(--box-border);
background: var(--box-bg);
border-width: 3px;
border-style: solid;
h1 {
font-size: 7em;
width: 100%;
color: var(--box-border);
}
}
&__box--right, &__box--left {
top: 0;
width: 40px;
backface-visibility: hidden;
}
&__box--left {
left: 0;
border-left-width: 5px;
transform: translate3d(1px, 0, -40px) rotateY(-90deg);
transform-origin: 0%;
}
&__box--right {
right: 0;
border-right-width: 5px;
transform: translate3d(-1px, 0, -40px) rotateY(90deg);
transform-origin: 100%;
}
}
}
&__item--active {
.item__3d-frame {
}
}
}
}
}
View Compiled
(function() {
"use strict";
var carousel = document.getElementsByClassName('carousel')[0],
slider = carousel.getElementsByClassName('carousel__slider')[0],
items = carousel.getElementsByClassName('carousel__slider__item'),
prevBtn = carousel.getElementsByClassName('carousel__prev')[0],
nextBtn = carousel.getElementsByClassName('carousel__next')[0];
var width, height, totalWidth, margin = 20,
currIndex = 0,
interval, intervalTime = 4000;
function init() {
resize();
move(Math.floor(items.length / 2));
bindEvents();
timer();
}
function resize() {
width = Math.max(window.innerWidth * .25, 275),
height = window.innerHeight * .5,
totalWidth = width * items.length;
slider.style.width = totalWidth + "px";
for(var i = 0; i < items.length; i++) {
let item = items[i];
item.style.width = (width - (margin * 2)) + "px";
item.style.height = height + "px";
}
}
function move(index) {
if(index < 1) index = items.length;
if(index > items.length) index = 1;
currIndex = index;
for(var i = 0; i < items.length; i++) {
let item = items[i],
box = item.getElementsByClassName('item__3d-frame')[0];
if(i == (index - 1)) {
item.classList.add('carousel__slider__item--active');
box.style.transform = "perspective(1200px)";
} else {
item.classList.remove('carousel__slider__item--active');
box.style.transform = "perspective(1200px) rotateY(" + (i < (index - 1) ? 40 : -40) + "deg)";
}
}
slider.style.transform = "translate3d(" + ((index * -width) + (width / 2) + window.innerWidth / 2) + "px, 0, 0)";
}
function timer() {
clearInterval(interval);
interval = setInterval(() => {
move(++currIndex);
}, intervalTime);
}
function prev() {
move(--currIndex);
timer();
}
function next() {
move(++currIndex);
timer();
}
function bindEvents() {
window.onresize = resize;
prevBtn.addEventListener('click', () => { prev(); });
nextBtn.addEventListener('click', () => { next(); });
}
init();
})();
This Pen doesn't use any external JavaScript resources.