TikTok Tutorial #8 - How to create an Image Slider in CSS and JavaScript

Learn with us how to create an image slider using CSS and Javascript!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim For the full code don’t forget to check the link in bio 😇 #programmingexercises #webdev #javascript #coding ♬ original sound - Creative Tim

HTML Code

Use this code to start your image slider!

<div class="app">

	<div class="cardList">
		<button class="cardList__btn btn btn--left">
			<div class="icon">
				<svg>
					<use xlink:href="#arrow-left"></use>
				</svg>
			</div>
		</button>

		<div class="cards__wrapper">
			<div class="card current--card">
				<div class="card__image">
					<img src="https://i.im.ge/2022/09/19/1qc4XM.denise-schuld-jpXJWajoRV0-unsplash.jpg" alt="" />
				</div>
			</div>

			<div class="card next--card">
				<div class="card__image">
					<img src="https://i.im.ge/2022/09/19/1qgoHp.martin-sanchez-LkN0Voym3Go-unsplash.jpg" alt="" />
				</div>
			</div>

			<div class="card previous--card">
				<div class="card__image">
					<img src="https://i.im.ge/2022/09/19/1qgmCF.tim-mossholder-V5F6MUzeys-unsplash.jpg" alt="" />
				</div>
			</div>
		</div>

		<button class="cardList__btn btn btn--right">
			<div class="icon">
				<svg>
					<use xlink:href="#arrow-right"></use>
				</svg>
			</div>
		</button>
	</div>

	<div class="infoList">
		<div class="info__wrapper">
			<div class="info current--info">
				<h1 class="text name">Creative Tim</h1>
				<h4 class="text location">webdev</h4>
			</div>

			<div class="info next--info">
				<h1 class="text name">Creative Tim</h1>
				<h4 class="text location">webdev</h4>
			</div>

			<div class="info previous--info">
				<h1 class="text name">Creative Tim</h1>
				<h4 class="text location">webdev</h4>
			</div>
		</div>
	</div>

	<div class="app__bg">
		<div class="app__bg__image current--image">
			<img src="https://i.im.ge/2022/09/19/1qc4XM.denise-schuld-jpXJWajoRV0-unsplash.jpg" alt="" />
		</div>
		<div class="app__bg__image next--image">
			<img src="https://i.im.ge/2022/09/19/1qgoHp.martin-sanchez-LkN0Voym3Go-unsplash.jpg" alt="" />
		</div>
		<div class="app__bg__image previous--image">
			<img src="https://i.im.ge/2022/09/19/1qgmCF.tim-mossholder-V5F6MUzeys-unsplash.jpg" alt="" />
		</div>
	</div>
</div>

<div class="loading__wrapper">
	<div class="loader--text">Loading...</div>
	<div class="loader">
		<span></span>
	</div>
</div>

<svg class="icons" style="display: none;">
	<symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
		<polyline points='328 112 184 256 328 400' style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
	</symbol>
	<symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
		<polyline points='184 112 328 256 184 400' style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
	</symbol>
</svg>

<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://dribbble.com/devloop01" target="_blank"><i class="fab fa-dribbble"></i></a>
</div>

CSS Code

Continue with the CSS code and add life to your image slider!

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap");
:root {
	--card-width: 200px;
	--card-height: 300px;

	--card-transition-duration: 800ms;
	--card-transition-easing: ease;
}

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

body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.787);
	overflow: hidden;
}

button {
	border: none;
	background: none;
	cursor: pointer;
	&:focus {
		outline: none;
		border: none;
	}
}

.app {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	&__bg {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -5;
		filter: blur(8px);
		pointer-events: none;
		user-select: none;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: #000;
			z-index: 1;
			opacity: 0.8;
		}

		&__image {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%) translateX(var(--image-translate-offset, 0));
			width: 180%;
			height: 180%;
			transition: transform 1000ms ease, opacity 1000ms ease;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			&.current--image {
				opacity: 1;
				--image-translate-offset: 0;
			}
			&.previous--image,
			&.next--image {
				opacity: 0;
			}
			&.previous--image {
				--image-translate-offset: -25%;
			}
			&.next--image {
				--image-translate-offset: 25%;
			}
		}
	}
}

.cardList {
	position: absolute;
	width: calc(3 * var(--card-width));
	height: auto;

	&__btn {
		--btn-size: 35px;
		width: var(--btn-size);
		height: var(--btn-size);
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 100;

		&.btn--left {
			left: -5%;
		}
		&.btn--right {
			right: -5%;
		}

		.icon {
			width: 100%;
			height: 100%;
			svg {
				width: 100%;
				height: 100%;
			}
		}
	}

	.cards__wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		perspective: 1000px;
	}
}

.card {
	--card-translateY-offset: 100vh;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translateX(var(--card-translateX-offset))
		translateY(var(--card-translateY-offset)) rotateY(var(--card-rotation-offset))
		scale(var(--card-scale-offset));
	display: inline-block;
	width: var(--card-width);
	height: var(--card-height);
	transition: transform var(--card-transition-duration)
		var(--card-transition-easing);
	user-select: none;

	&::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: #000;
		z-index: 1;
		transition: opacity var(--card-transition-duration)
			var(--card-transition-easing);
		opacity: calc(1 - var(--opacity));
	}

	&__image {
		position: relative;
		width: 100%;
		height: 100%;
		img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&.current--card {
		--current-card-rotation-offset: 0;
		--card-translateX-offset: 0;
		--card-rotation-offset: var(--current-card-rotation-offset);
		--card-scale-offset: 1.2;
		--opacity: 0.8;
	}

	&.previous--card {
		--card-translateX-offset: calc(-1 * var(--card-width) * 1.1);
		--card-rotation-offset: 25deg;
	}

	&.next--card {
		--card-translateX-offset: calc(var(--card-width) * 1.1);
		--card-rotation-offset: -25deg;
	}

	&.previous--card,
	&.next--card {
		--card-scale-offset: 0.9;
		--opacity: 0.4;
	}
}

.infoList {
	position: absolute;
	width: calc(3 * var(--card-width));
	height: var(--card-height);
	pointer-events: none;

	.info__wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	perspective: 1000px;
	transform-style: preserve-3d;
	}
}

.info {
	margin-bottom: calc(var(--card-height) / 8);
	margin-left: calc(var(--card-width) / 1.5);
	transform: translateZ(2rem);
	transition: transform var(--card-transition-duration)
		var(--card-transition-easing);
	.text {
		position: relative;
		font-family: "Montserrat";
		font-size: calc(var(--card-width) * var(--text-size-offset, 0.2));
		white-space: nowrap;
		color: #fff;
		width: fit-content;
	}

	.name,
	.location {
		text-transform: uppercase;
	}

	.location {
		font-weight: 800;
	}

	.location {
		--mg-left: 40px;
		--text-size-offset: 0.12;
		font-weight: 600;
		margin-left: var(--mg-left);
		margin-bottom: calc(var(--mg-left) / 2);
		padding-bottom: 0.8rem;
		&::before,
		&::after {
			content: "";
			position: absolute;
			background: #fff;
			left: 0%;
			transform: translate(calc(-1 * var(--mg-left)), -50%);
		}
		&::before {
			top: 50%;
			width: 20px;
			height: 5px;
		}
		&::after {
			bottom: 0;
			width: 60px;
			height: 2px;
		}
	}

	.description {
		--text-size-offset: 0.065;
		font-weight: 500;
	}

	&.current--info {
		opacity: 1;
		display: block;
	}
	&.previous--info,
	&.next--info {
		opacity: 0;
		display: none;
	}
}

.loading__wrapper {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #000;
	z-index: 200;
	.loader--text {
		color: #fff;
		font-family: "Montserrat";
		font-weight: 500;
		margin-bottom: 1.4rem;
	}
	.loader {
		position: relative;
		width: 200px;
		height: 2px;
		background: rgba(255, 255, 255, 0.25);
		span {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgb(255, 0, 0);
			transform: scaleX(0);
			transform-origin: left;
		}
	}
}

@media only screen and (min-width: 800px) {
	:root {
		--card-width: 250px;
		--card-height: 400px;
	}
}

.support {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a {
		margin: 0 10px;
		color: #fff;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover {
			transform: scale(1.1);
		}
	}
}

Javascript Code

Add the JS code and Voila!

console.clear();

const { gsap, imagesLoaded } = window;

const buttons = {
	prev: document.querySelector(".btn--left"),
	next: document.querySelector(".btn--right"),
};
const cardsContainerEl = document.querySelector(".cards__wrapper");
const appBgContainerEl = document.querySelector(".app__bg");

const cardInfosContainerEl = document.querySelector(".info__wrapper");

buttons.next.addEventListener("click", () => swapCards("right"));

buttons.prev.addEventListener("click", () => swapCards("left"));

function swapCards(direction) {
	const currentCardEl = cardsContainerEl.querySelector(".current--card");
	const previousCardEl = cardsContainerEl.querySelector(".previous--card");
	const nextCardEl = cardsContainerEl.querySelector(".next--card");

	const currentBgImageEl = appBgContainerEl.querySelector(".current--image");
	const previousBgImageEl = appBgContainerEl.querySelector(".previous--image");
	const nextBgImageEl = appBgContainerEl.querySelector(".next--image");

	changeInfo(direction);
	swapCardsClass();

	removeCardEvents(currentCardEl);

	function swapCardsClass() {
		currentCardEl.classList.remove("current--card");
		previousCardEl.classList.remove("previous--card");
		nextCardEl.classList.remove("next--card");

		currentBgImageEl.classList.remove("current--image");
		previousBgImageEl.classList.remove("previous--image");
		nextBgImageEl.classList.remove("next--image");

		currentCardEl.style.zIndex = "50";
		currentBgImageEl.style.zIndex = "-2";

		if (direction === "right") {
			previousCardEl.style.zIndex = "20";
			nextCardEl.style.zIndex = "30";

			nextBgImageEl.style.zIndex = "-1";

			currentCardEl.classList.add("previous--card");
			previousCardEl.classList.add("next--card");
			nextCardEl.classList.add("current--card");

			currentBgImageEl.classList.add("previous--image");
			previousBgImageEl.classList.add("next--image");
			nextBgImageEl.classList.add("current--image");
		} else if (direction === "left") {
			previousCardEl.style.zIndex = "30";
			nextCardEl.style.zIndex = "20";

			previousBgImageEl.style.zIndex = "-1";

			currentCardEl.classList.add("next--card");
			previousCardEl.classList.add("current--card");
			nextCardEl.classList.add("previous--card");

			currentBgImageEl.classList.add("next--image");
			previousBgImageEl.classList.add("current--image");
			nextBgImageEl.classList.add("previous--image");
		}
	}
}

function changeInfo(direction) {
	let currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
	let previousInfoEl = cardInfosContainerEl.querySelector(".previous--info");
	let nextInfoEl = cardInfosContainerEl.querySelector(".next--info");

	gsap.timeline()
		.to([buttons.prev, buttons.next], {
		duration: 0.2,
		opacity: 0.5,
		pointerEvents: "none",
	})
		.to(
		currentInfoEl.querySelectorAll(".text"),
		{
			duration: 0.4,
			stagger: 0.1,
			translateY: "-120px",
			opacity: 0,
		},
		"-="
	)
		.call(() => {
		swapInfosClass(direction);
	})
		.call(() => initCardEvents())
		.fromTo(
		direction === "right"
		? nextInfoEl.querySelectorAll(".text")
		: previousInfoEl.querySelectorAll(".text"),
		{
			opacity: 0,
			translateY: "40px",
		},
		{
			duration: 0.4,
			stagger: 0.1,
			translateY: "0px",
			opacity: 1,
		}
	)
		.to([buttons.prev, buttons.next], {
		duration: 0.2,
		opacity: 1,
		pointerEvents: "all",
	});

	function swapInfosClass() {
		currentInfoEl.classList.remove("current--info");
		previousInfoEl.classList.remove("previous--info");
		nextInfoEl.classList.remove("next--info");

		if (direction === "right") {
			currentInfoEl.classList.add("previous--info");
			nextInfoEl.classList.add("current--info");
			previousInfoEl.classList.add("next--info");
		} else if (direction === "left") {
			currentInfoEl.classList.add("next--info");
			nextInfoEl.classList.add("previous--info");
			previousInfoEl.classList.add("current--info");
		}
	}
}

function updateCard(e) {
	const card = e.currentTarget;
	const box = card.getBoundingClientRect();
	const centerPosition = {
		x: box.left + box.width / 2,
		y: box.top + box.height / 2,
	};
	let angle = Math.atan2(e.pageX - centerPosition.x, 0) * (35 / Math.PI);
	gsap.set(card, {
		"--current-card-rotation-offset": `${angle}deg`,
	});
	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
	gsap.set(currentInfoEl, {
		rotateY: `${angle}deg`,
	});
}

function resetCardTransforms(e) {
	const card = e.currentTarget;
	const currentInfoEl = cardInfosContainerEl.querySelector(".current--info");
	gsap.set(card, {
		"--current-card-rotation-offset": 0,
	});
	gsap.set(currentInfoEl, {
		rotateY: 0,
	});
}

function initCardEvents() {
	const currentCardEl = cardsContainerEl.querySelector(".current--card");
	currentCardEl.addEventListener("pointermove", updateCard);
	currentCardEl.addEventListener("pointerout", (e) => {
		resetCardTransforms(e);
	});
}

initCardEvents();

function removeCardEvents(card) {
	card.removeEventListener("pointermove", updateCard);
}

function init() {

	let tl = gsap.timeline();

	tl.to(cardsContainerEl.children, {
		delay: 0.15,
		duration: 0.5,
		stagger: {
			ease: "power4.inOut",
			from: "right",
			amount: 0.1,
		},
		"--card-translateY-offset": "0%",
	})
		.to(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
		delay: 0.5,
		duration: 0.4,
		stagger: 0.1,
		opacity: 1,
		translateY: 0,
	})
		.to(
		[buttons.prev, buttons.next],
		{
			duration: 0.4,
			opacity: 1,
			pointerEvents: "all",
		},
		"-=0.4"
	);
}

const waitForImages = () => {
	const images = [...document.querySelectorAll("img")];
	const totalImages = images.length;
	let loadedImages = 0;
	const loaderEl = document.querySelector(".loader span");

	gsap.set(cardsContainerEl.children, {
		"--card-translateY-offset": "100vh",
	});
	gsap.set(cardInfosContainerEl.querySelector(".current--info").querySelectorAll(".text"), {
		translateY: "40px",
		opacity: 0,
	});
	gsap.set([buttons.prev, buttons.next], {
		pointerEvents: "none",
		opacity: "0",
	});

	images.forEach((image) => {
		imagesLoaded(image, (instance) => {
			if (instance.isComplete) {
				loadedImages++;
				let loadProgress = loadedImages / totalImages;

				gsap.to(loaderEl, {
					duration: 1,
					scaleX: loadProgress,
					backgroundColor: `hsl(${loadProgress * 120}, 100%, 50%`,
				});

				if (totalImages == loadedImages) {
					gsap.timeline()
						.to(".loading__wrapper", {
						duration: 0.8,
						opacity: 0,
						pointerEvents: "none",
					})
						.call(() => init());
				}
			}
		});
	});
};

waitForImages();

---

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

• TikTok
• Instagram
• Twitter
• Facebook
• Blog

Other useful resources:

• Free Resources (UI Kits, Admin, and Mobile Templates)
• UI/UX Design Book
• Tailwind CSS UI/UX Design Course - Code Included
• The Ultimate UI/UX Design Course