CodePen Embed - JS Carousel with custom JS/CSS transition effect

<div class="cssclippathpolygon home-slider" id="homeSlider">
	<div class="slides">
		<div class="slide" id="homeSlide1">
			<div class="home-slider-item">
				<div class="bg">
					<img src="https://images.unsplash.com/photo-1635598786348-9f9cbcaa66dc?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzc0MzE4MA&ixlib=rb-1.2.1&q=85" alt="" class="back">
				</div>
				<div class="slide-inner">
					<div class="home-slider-content">
						<div class="row">
							<div class="col">
								<div class="home-slider-desc">
									<h1>
										<span>アライブの</span>
										<span>テスト</span>
										<span>のテキスト</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="slide" id="homeSlide2">
			<div class="home-slider-item">
				<div class="bg">

					<img src="https://images.unsplash.com/photo-1637090404371-e04d03de9be5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzc0MzE4MA&ixlib=rb-1.2.1&q=85" alt="" class="back">

				</div>
				<div class="slide-inner">
					<div class="home-slider-content">
						<div class="row">
							<div class="col">
								<div class="home-slider-desc">
									<h1>
										<span>もっとダミー</span>
										<span>テキストは</span>
										<span>こちらです</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="slide" id="homeSlide3">
			<div class="home-slider-item">
				<div class="bg">

					<img src="https://images.unsplash.com/photo-1637196268676-ccfe49d8ba1c?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzc0MzE4MA&ixlib=rb-1.2.1&q=85" alt="" class="back">

				</div>
				<div class="slide-inner">
					<div class="home-slider-content">
						<div class="row">
							<div class="col">
								<div class="home-slider-desc">
									<h1>
										<span>これも</span>
										<span>テストの</span>
										<span>テキストです</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="home-slider-indices">
	<div class="row">
		<div class="col col-auto">
			<div class="indices">
				<ul>
					<li class="false">
						<a href="#homeSlide1" class="index">
							<div class="progress"><span class="bar"></span></div>
						</a>
					</li>
					<li class="true">
						<a href="#homeSlide2" class="index">
							<div class="progress"><span class="bar"></span></div>
						</a>
					</li>
					<li class="true">
						<a href="#homeSlide3" class="index">
							<div class="progress"><span class="bar"></span></div>
						</a>
					</li>
				</ul>
				<span class="index-no">
					<span class="current-page">1</span>
					/
					<span class="total-pages">3</span>
				</span>
				<a href="javascript:;" class="btn-pause">PAUSE</a>
			</div>
		</div>
	</div>
</div>

$montserrat: "Montserrat", sans-serif;

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	font-family: "Noto Sans JP", sans-serif;
}

html,
body {
	height: 100%;
}

.slides {
	height: 100%;
}

.home-slider {
	height: 100vh;
	.slide {
		overflow: hidden;
		width: 100%;
		height: 100%;
		position: absolute;
		opacity: 0;
		visibility: hidden;
		.home-slider-item {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
		}
		.slide-inner {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			bottom: 0;
		}
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transform: scale(1.3);
			.back {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		&.active {
			opacity: 1;
			visibility: visible;
			.bg {
				transition: transform 20000ms cubic-bezier(0.23, 1, 0.32, 1);
				transform: scale(1);
			}
		}
	}
}

.cssclippathpolygon.home-slider .slide {
	&.out-start {
		-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 150%);
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 150%);
		height: 100%;
		width: 100%;
	}

	&.slide.out {
		-webkit-clip-path: polygon(0% -150%, 100% -150%, 100% -20%, 0% 0%);
		clip-path: polygon(0% -150%, 100% -150%, 100% -20%, 0% 0%);
		height: 100%;
		width: 100%;
		transition: clip-path 1400ms cubic-bezier(0.23, 1, 0.32, 1);
	}
}

.home-slider-content {
	position: absolute;
	left: 40px;
	right: 0;
	bottom: 100px;
	color: #fff;
	.home-slider-desc {
		h1 {
			font-size: 5.6rem;
			font-weight: 500;
			line-height: 1.60714286;
			letter-spacing:0.35em;
			>span {
				display: block;
			}
		}
	}
}

.home-slider-indices {
	position: absolute;
	display: flex;
	right: 40px;
	bottom: 100px;
	z-index: 5;
	.indices {
		position: relative;
		font-size: 0;
		display: flex;
		align-items: center;
		li {
			display: inline-block;
			vertical-align: top;
			margin-right: 0.75rem;
			width: 40px;
			&:last-child {
				margin-right: 0;
			}
			.index {
				display: block;
			}
			.progress {
				height: 2px;
				background: rgba(255,255,255,0.3);
				position: relative;
				width: 100%;
				.bar {
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					background: #fff;
				}
			}
		}
		.index-no {
			font-family: $montserrat;
			font-size:1.4rem;
			font-weight: 500;
			color:#FFF;
			display: block;
			margin: 0 16px;
		}
		a.btn-pause {
			width: 12px;
			background-color: transparent;
			position: relative;
			height: 16px;
			text-indent: -999em;
			display: block;
			font-size: 0;
			&:before, &:after {
				position: absolute;
				width: 2px;
				background-color: #fff;
				height: 100%;
				content: "";
				display: block;
				top: 0;
				transition: all 200ms ease-out;
			}
			&:after {
				right: 0;
			}
			&.play {
				width: 12px;
				&:before {
					border-top: 8px solid transparent;
					border-left: 16px solid #fff;
					border-bottom: 8px solid transparent;
					background: transparent;
					width: 0;
					height: 0;
				}
				&:after {
					height: 0;
					width: 0;
					opacity: 0;
				}
			}
		}
	}
}

.home-slider .slide.active .home-slider-desc h1 {
	transition: transform 1600ms cubic-bezier(0.23, 1, 0.32, 1),
		opacity 1600ms ease-out;
	transform: translateX(0);
	opacity: 1;
	transition-delay: 600ms;
}

.home-slider .slide.out .home-slider-desc h1,
.home-slider .slide.active.out .home-slider-desc h1 {
	transition: transform 1000ms cubic-bezier(0.23, 1, 0.32, 1),
		opacity 1000ms ease-out;
	transform: translateY(50px);
	opacity: 0;
	transition-delay: 0ms;
}

@keyframes scroll-down-line {
	0%,
	20% {
		height: 45%;
		top: -45%;
	}
	80%,
	100% {
		height: 45%;
		top: 145%;
	}
}

View Compiled



$(function () {
	var $homeSlider = $("#homeSlider");
	var autoplayTick = null;
	var autoplaySpeed = 7000;
	var isAutoplay = true;
	var isTransition = false;
	var swipeType = "swiperight";
	var slideCount = $(".slide").length;

	$(".total-pages").text(slideCount);

	function startAutoplay() {
		if (autoplayTick) {
			clearInterval(autoplayTick);
			autoplayTick = null;
		}
		autoplayTick = setInterval(function () {
			showNextSlide();
		}, autoplaySpeed);
	}

	function stopAutoplay() {
		if (autoplayTick) {
			clearInterval(autoplayTick);
			autoplayTick = null;
		}
		$(".home-slider-indices .bar").stop().css("width", 0);
		$(".home-slider-indices li.active .bar").stop().css("width", "100%");
	}

	function showPrevSlide() {
		swipeType = "swiperight";
		$homeSlider.attr("data-swipe", swipeType);
		var currentSlide = $(".slide.current", $homeSlider);
		
		var prevSlide = currentSlide.prev();
		var getIndex = $(prevSlide).index() < 0 ? $(".slide").length : $(prevSlide).index() + 1;
		$('.current-page').text(getIndex);
		if (!prevSlide[0]) {
			prevSlide = $(".slide:last-child", $homeSlider);
		}
		showSlide(prevSlide);
	}

	function showNextSlide() {
		swipeType = "swipeleft";
		$homeSlider.attr("data-swipe", swipeType);
		var currentSlide = $(".slide.current", $homeSlider);
		var nextSlide = currentSlide.next();
		var getIndex = $(nextSlide).index() < 0 ? 1 : $(nextSlide).index() + 1;
		$('.current-page').text(getIndex);
		if (!nextSlide[0]) {
			nextSlide = $(".slide:eq(0)", $homeSlider);
		}
		showSlide(nextSlide);
	}

	function showSlide(nextSlide) {
		var currentSlide = $(".slide.current", $homeSlider);
		
		nextSlide.removeClass("active");

		$(".home-slider-indices .bar").stop().css("width", 0);
		var index = $(
			'.home-slider-indices a[href="#' + nextSlide.attr("id") + '"]'
		).closest("li");
		index.addClass("active").siblings().removeClass("active");

		isTransition = true;

		currentSlide.addClass("out-start");
		setTimeout(function () {
			currentSlide.addClass("out").css("z-index", 3);
			currentSlide.siblings().removeClass("active").css("z-index", 1);
			nextSlide.css("z-index", 2).addClass("active").removeClass("out out-start");
			currentSlide.removeClass("current");
			nextSlide.addClass("current");
		}, 100);

		setTimeout(function () {
			isTransition = false;
		}, 500);

		if (isAutoplay) {
			$(".bar", index)
				.stop()
				.css("width", 0)
				.animate({ width: "100%" }, autoplaySpeed, "linear");
			startAutoplay();
		} else {
			$(".bar", index).stop().css("width", "100%");
		}
	}

	$(".home-slider-indices a.index").on("click", function (e) {
		e.preventDefault();
		if (isTransition) return;
		if ($(this).closest("li").hasClass("active")) return;
		var slideId = $(this).attr("href");
		$('.current-page').text($(this).parent().index()+1);
		showSlide($(".slide" + slideId));
	});

	$(".indices .btn-pause").on("click", function (e) {
		e.preventDefault();
		if (isTransition) return;
		if (isAutoplay) {
			isAutoplay = false;
			$(".indices .btn-pause").addClass("play");
			stopAutoplay();
		} else {
			isAutoplay = true;
			$(".indices .btn-pause").removeClass("play");
			showNextSlide();
		}
	});

	$(window).on("ds-loaded", function (e) {
		$(".slide:eq(0)", $homeSlider).addClass("active current");
		isAutoplay = true;
		showSlide($(".slide:eq(0)", $homeSlider));
		startAutoplay();
	});

	var mc = new Hammer($homeSlider[0]);
	mc.get("swipe").set({ direction: Hammer.DIRECTION_HORIZONTAL });

	mc.on("swipeleft swiperight", function (e) {
		if (Math.abs(e.deltaX) < 30) return;
		if (e.type == "swiperight") {
			showPrevSlide();
		} else {
			showNextSlide();
		}
	});

	$(window).on("load", function () {
		$(".slide:eq(0)", $homeSlider).addClass("active current");
		isAutoplay = true;
		showSlide($(".slide:eq(0)", $homeSlider));
		startAutoplay();
	});
});

This Pen is owned by Sean Hay on CodePen.

See more by @seanh on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript