Slideshow (Modern )

1,612 0 zegarkidawida Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

<div class="slideshow-container">
	<div class="slide active">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=1')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">01</div>
			<h2 class="slide-title">Cosmic Dreams</h2>
			<p class="slide-description">Journey through infinite possibilities where reality bends and imagination soars beyond the stars.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=1" alt="Slide 1">
		</div>
	</div>

<div class="slide">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=2')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">02</div>
			<h2 class="slide-title">Urban Pulse</h2>
			<p class="slide-description">Feel the rhythm of city life where neon lights dance with shadows in the endless metropolitan symphony.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=2" alt="Slide 2">
		</div>
	</div>

<div class="slide">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=3')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">03</div>
			<h2 class="slide-title">Ocean Depths</h2>
			<p class="slide-description">Dive into mysterious waters where ancient secrets whisper through currents of time and space.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=3" alt="Slide 3">
		</div>
	</div>

<div class="slide">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=4')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">04</div>
			<h2 class="slide-title">Desert Mirage</h2>
			<p class="slide-description">Witness the dance of heat and sand where mirages reveal hidden truths in the vast golden expanse.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=4" alt="Slide 4">
		</div>
	</div>

<div class="slide">
		<div class="slide-background" style="background-image: url('https://picsum.photos/1920/1080?random=5')"></div>
		<div class="slide-overlay"></div>
		<div class="slide-content">
			<div class="slide-number">05</div>
			<h2 class="slide-title">Forest Magic</h2>
			<p class="slide-description">Step into enchanted woods where every leaf tells a story and magic flows through ancient roots.</p>
		</div>
		<div class="slide-image">
			<img src="https://picsum.photos/400/300?random=5" alt="Slide 5">
		</div>
	</div>
</div>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Arial", sans-serif;
	background: #000;
	overflow: hidden;
	cursor: none;
}

.slideshow-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	transform: scale(1.1) rotate(2deg);
}

.slide.active {
	opacity: 1;
	visibility: visible;
	transform: scale(1) rotate(0deg);
}

.slide.prev {
	transform: scale(0.9) rotate(-2deg) translateX(-50px);
	opacity: 0;
	visibility: hidden;
}

.slide.next {
	transform: scale(0.9) rotate(2deg) translateX(50px);
	opacity: 0;
	visibility: hidden;
}

.slide-background {
	position: absolute;
	top: -10%;
	left: -10%;
	width: 120%;
	height: 120%;
	background-size: cover;
	background-position: center;
	transform: skewX(-15deg);
	transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1),
		opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1);
	opacity: 0;
}

.slide.active .slide-background {
	transform: skewX(-5deg) scale(1.05);
	opacity: 1;
}

.slide-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
	transform: skewX(-10deg);
	transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide.active .slide-overlay {
	transform: skewX(-3deg);
}

.slide-content {
	position: absolute;
	top: 50%;
	left: 15%;
	transform: translateY(-50%);
	color: white;
	z-index: 10;
	opacity: 0;
	transform: translateY(-50%) translateX(-100px) skewX(-20deg);
	transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide.active .slide-content {
	opacity: 1;
	transform: translateY(-50%) translateX(0) skewX(-5deg);
}

.slide-number {
	font-size: 8rem;
	font-weight: 900;
	line-height: 0.8;
	opacity: 0.7;
	margin-bottom: 1rem;
	transform: skewX(-25deg);
	background: linear-gradient(45deg, #ff0, #ffd);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.9))
		drop-shadow(2px 2px 4px rgba(0, 0, 0, 1))
		drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.8));
}

.slide-title {
	font-size: 4rem;
	font-weight: 700;
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	transform: skewX(-15deg);
	text-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 2px 2px 8px rgba(0, 0, 0, 1),
		-2px -2px 8px rgba(0, 0, 0, 0.8), 4px 4px 15px rgba(0, 0, 0, 0.7);
}

.slide-description {
	font-size: 1.2rem;
	line-height: 1.6;
	max-width: 500px;
	opacity: 0.9;
	transform: skewX(-8deg);
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 1px 1px 4px rgba(0, 0, 0, 1);
}

.navigation {
	position: fixed;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	z-index: 100;
}

.nav-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	transform: skewX(-25deg);
}

.nav-dot.active {
	background: #ff6b6b;
	transform: scale(1.5) skewX(-10deg);
	box-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
}

.nav-arrow {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 60px;
	height: 60px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	cursor: pointer;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	transform: translateY(-50%) skewX(-20deg);
}

.nav-arrow:hover {
	border-color: #ff6b6b;
	background: rgba(255, 107, 107, 0.2);
	transform: translateY(-50%) skewX(-10deg) scale(1.1);
	box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
}

.nav-arrow.prev {
	left: 40px;
}

.nav-arrow.next {
	right: 40px;
}

.nav-arrow::after {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid white;
	border-right: 2px solid white;
}

.nav-arrow.prev::after {
	transform: rotate(-135deg);
	margin-left: 5px;
}

.nav-arrow.next::after {
	transform: rotate(45deg);
	margin-right: 5px;
}

.progress-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	height: 4px;
	background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
	z-index: 100;
	transform-origin: left;
	transform: scaleX(0) skewX(-10deg);
	transition: transform 5s linear;
}

.slide-image {
	position: absolute;
	top: 50%;
	right: 10%;
	width: 400px;
	height: 300px;
	transform: translateY(-50%) skewX(-15deg) scale(0.8);
	opacity: 0;
	transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.slide.active .slide-image {
	transform: translateY(-50%) skewX(-5deg) scale(1);
	opacity: 1;
}

.slide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.custom-cursor {
	position: fixed;
	width: 20px;
	height: 20px;
	background: #ff6b6b;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1000;
	mix-blend-mode: difference;
	transition: transform 0.1s ease;
}

@media (max-width: 768px) {
	.slide-title {
		font-size: 2.5rem;
	}

.slide-number {
		font-size: 4rem;
	}

.slide-content {
		left: 5%;
		right: 5%;
	}

.slide-image {
		width: 250px;
		height: 180px;
		right: 5%;
	}

.nav-arrow {
		width: 50px;
		height: 50px;
	}
}

class SlantedCarousel {
	constructor() {
		this.slides = document.querySelectorAll(".slide");
		this.navDots = document.querySelectorAll(".nav-dot");
		this.prevBtn = document.querySelector(".nav-arrow.prev");
		this.nextBtn = document.querySelector(".nav-arrow.next");
		this.progressBar = document.querySelector(".progress-bar");
		this.cursor = document.querySelector(".custom-cursor");

this.currentSlide = 0;
		this.totalSlides = this.slides.length;
		this.isAnimating = false;
		this.autoPlayInterval = null;

this.init();
	}

init() {
		this.bindEvents();
		this.startAutoPlay();
		this.updateProgress();
	}

bindEvents() {
		// Navigation arrows
		this.prevBtn.addEventListener("click", () => this.prevSlide());
		this.nextBtn.addEventListener("click", () => this.nextSlide());

// Navigation dots
		this.navDots.forEach((dot, index) => {
			dot.addEventListener("click", () => this.goToSlide(index));
		});

// Keyboard navigation
		document.addEventListener("keydown", (e) => {
			if (e.key === "ArrowLeft") this.prevSlide();
			if (e.key === "ArrowRight") this.nextSlide();
		});

// Mouse events for auto-play
		document.addEventListener("mouseenter", () => this.stopAutoPlay());
		document.addEventListener("mouseleave", () => this.startAutoPlay());

// Custom cursor
		document.addEventListener("mousemove", (e) => {
			this.cursor.style.left = e.clientX + "px";
			this.cursor.style.top = e.clientY + "px";
		});

// Touch support
		let startX = 0;
		document.addEventListener("touchstart", (e) => {
			startX = e.touches[0].clientX;
		});

document.addEventListener("touchend", (e) => {
			const endX = e.changedTouches[0].clientX;
			const diff = startX - endX;

if (Math.abs(diff) > 50) {
				if (diff > 0) {
					this.nextSlide();
				} else {
					this.prevSlide();
				}
			}
		});
	}

goToSlide(index) {
		if (this.isAnimating || index === this.currentSlide) return;

this.isAnimating = true;

// Update slides
		this.slides.forEach((slide, i) => {
			slide.classList.remove("active", "prev", "next");

if (i === index) {
				slide.classList.add("active");
			} else if (i < index) {
				slide.classList.add("prev");
			} else {
				slide.classList.add("next");
			}
		});

// Update navigation dots
		this.navDots.forEach((dot, i) => {
			dot.classList.toggle("active", i === index);
		});

this.currentSlide = index;
		this.updateProgress();

setTimeout(() => {
			this.isAnimating = false;
		}, 1500);
	}

nextSlide() {
		const next = (this.currentSlide + 1) % this.totalSlides;
		this.goToSlide(next);
	}

prevSlide() {
		const prev = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
		this.goToSlide(prev);
	}

startAutoPlay() {
		this.stopAutoPlay();
		this.autoPlayInterval = setInterval(() => {
			this.nextSlide();
		}, 2000);

this.progressBar.style.transform = "scaleX(1)";
	}

stopAutoPlay() {
		if (this.autoPlayInterval) {
			clearInterval(this.autoPlayInterval);
			this.autoPlayInterval = null;
		}
		this.progressBar.style.transform = "scaleX(0)";
	}

updateProgress() {
		this.progressBar.style.transition = "none";
		this.progressBar.style.transform = "scaleX(0)";

setTimeout(() => {
			this.progressBar.style.transition = "transform 5s linear";
			if (this.autoPlayInterval) {
				this.progressBar.style.transform = "scaleX(1)";
			}
		}, 50);
	}
}

// Initialize carousel when DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
	new SlantedCarousel();
});

// Add some extra visual flair
document.addEventListener("mousemove", (e) => {
	const mouseX = e.clientX / window.innerWidth;
	const mouseY = e.clientY / window.innerHeight;

document.querySelectorAll(".slide-background").forEach((bg, i) => {
		const speed = (i + 1) * 0.5;
		const xPos = (mouseX - 0.5) * 1.5 * speed;
		const yPos = (mouseY - 0.5) * speed;

bg.style.transform += ` translate(${xPos}px, ${yPos}px)`;
	});
});

Comments 0

…

Slideshow (Modern )

Recommended

Comments 0