<div class="items">
<div class="item active">
<img src="http://via.placeholder.com/500x500">
</div>
<div class=" item next">
<img src="http://via.placeholder.com/500x500">
</div>
<div class="item">
<img src="http://via.placeholder.com/500x500">
</div>
<div class="item">
<img src="http://via.placeholder.com/500x500">
</div>
<div class="item prev">
<img src="http://via.placeholder.com/500x500">
</div>
<div class="button-container">
<div class="button"><i class="fas fa-angle-left"></i></div>
<div class="button"><i class="fas fa-angle-right"></i></div>
</div>
</div>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.items {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
user-select: none;
}
.items .item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
border-radius: 50%;
overflow: hidden;
transition: all 300ms ease-in-out;
z-index: -1;
opacity: 0;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.item.active {
opacity: 1;
z-index: 99;
box-shadow: 0px 0px 105px -35px rgba(0, 0, 0, 0.75);
}
.item.prev {
z-index: 2;
opacity: 0.25;
transform: translate(-125%, -50%);
}
.item.next {
z-index: 2;
opacity: 0.25;
transform: translate(25%, -50%);
}
.items .button-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 275px;
z-index: 100;
}
.button-container .button {
color: #fff;
font-size: 32px;
cursor: pointer;
position: relative;
opacity: 0.75;
transition: all 300ms ease-in-out;
}
.button-container .button:hover {
opacity: 1;
}
.button-container .button:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 1);
border-radius: 50%;
z-index: -99;
}
.button-container .button:nth-child(1) {
float: left;
}
.button-container .button:nth-child(2) {
float: right;
}
// I will be creating a different pen with touch support but right // now I have no time for it due to school
const slider = document.querySelector(".items");
const slides = document.querySelectorAll(".item");
const button = document.querySelectorAll(".button");
let current = 0;
let prev = 4;
let next = 1;
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", () => i == 0 ? gotoPrev() : gotoNext());
}
const gotoPrev = () => current > 0 ? gotoNum(current - 1) : gotoNum(slides.length - 1);
const gotoNext = () => current < 4 ? gotoNum(current + 1) : gotoNum(0);
const gotoNum = number => {
current = number;
prev = current - 1;
next = current + 1;
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
slides[i].classList.remove("prev");
slides[i].classList.remove("next");
}
if (next == 5) {
next = 0;
}
if (prev == -1) {
prev = 4;
}
slides[current].classList.add("active");
slides[prev].classList.add("prev");
slides[next].classList.add("next");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.