10+ CSS Carousel Examples

This post contains a total of 10+ CSS Carousel Examples with Source Code. All these Carousels are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Carousel Examples

1. Pure CSS Emoji Carousel

Made by jhey. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  box-sizing: border-box;
}
body {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  transform-style: preserve-3d;
  perspective: 1500px;
  background: #86e2d5;
}
:root {
  --carouselDur: 4;
  --horseDur: 2;
  --baseInnerEven: #ff8565;
  --baseInnerOdd: #dcdad4;
  --baseEven: #ff7653;
  --baseOdd: #e7e5e2;
  --core: #abb7b7;
  --coreWindow: #fff;
  --coreWindowSill: #7b8e8e;
  --baseLight: #fff;
  --baseSkirt: #ff9478;
  --hatOdd: #ff9478;
  --hatEven: #f2f1ef;
}
.carousel {
  height: 100px;
  width: 100px;
  transform: translate(-50%, -50%) rotateX(-15deg) rotateY(40deg);
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
}
.carousel__core {
  bottom: -10%;
  height: 150%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  transform-style: preserve-3d;
  width: 20%;
}
.carousel__core div {
  background: var(--core);
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(calc(((-360 / var(--sides)) * var(--side)) * 1deg)) translate3d(0, 0, 30px) rotateY(180deg);
  width: 100%;
}
.carousel__core div:nth-of-type(even):after {
  background: var(--coreWindow);
  border: 2px solid var(--coreWindowSill);
  border-radius: 35% 35% 0 0;
  content: '';
  height: 15%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, 0%);
  width: 50%;
}
.carousel__horses {
  -webkit-animation: carousel calc(var(--carouselDur) * 1s) infinite linear;
          animation: carousel calc(var(--carouselDur) * 1s) infinite linear;
  height: 50px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  width: 50px;
  z-index: 5;
}
.carousel__horse {
  -webkit-animation: horse calc(var(--horseDur) * 1s) calc((var(--horseDur) * var(--delay)) * 1s) infinite linear;
          animation: horse calc(var(--horseDur) * 1s) calc((var(--horseDur) * var(--delay)) * 1s) infinite linear;
  font-size: 2rem;
  left: 50%;
  position: absolute;
  top: 50%;
}
.carousel__base {
  -webkit-animation: carousel calc(var(--carouselDur) * 1s) infinite linear;
          animation: carousel calc(var(--carouselDur) * 1s) infinite linear;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.carousel__base div {
  background: var(--baseOdd);
  height: 20px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, 0) rotateY(calc(((-360 / var(--sides)) * var(--side)) * 1deg)) translate3d(0, 0, 50px);
  transform-origin: top center;
  transform-style: preserve-3d;
  width: 20px;
}
.carousel__base div:before {
  -webkit-clip-path: inset(40% 0 0 0);
  content: '';
  position: absolute;
  border-bottom: 120px solid var(--baseInnerOdd);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  clip-path: inset(40% 0 0 0);
  left: 50%;
  transform: translate(-50%, 0) rotateX(90deg) translate(0, -50px);
  transform-origin: top center;
  transform-style: preserve-3d;
}
.carousel__base div:nth-of-type(even) {
  background: var(--baseEven);
}
.carousel__base div:nth-of-type(even):before {
  border-bottom: 120px solid var(--baseInnerEven);
}
.carousel__base div:after {
  content: '';
  background: radial-gradient(circle at 50% 50%, var(--baseLight) 20%, var(--baseSkirt) 20%), var(--baseSkirt);
  height: 20px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate3d(-50%, 0, 70px);
  transform-origin: top center;
  width: 40px;
}
.carousel__hat {
  -webkit-animation: carousel calc(var(--carouselDur) * 1s) infinite linear;
          animation: carousel calc(var(--carouselDur) * 1s) infinite linear;
  bottom: 100%;
  height: 50px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  width: 50px;
}
.carousel__hat div {
  border-bottom: 140px solid var(--hatOdd);
  border-top: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, 0) rotateY(calc(((-360 / var(--sides)) * var(--side)) * 1deg)) rotateX(65deg);
  transform-origin: top center;
  transform-style: preserve-3d;
}
.carousel__hat div:nth-of-type(even) {
  border-bottom: 140px solid var(--hatEven);
}
.carousel__hat div:nth-of-type(even):after {
  background: var(--hatEven);
}
.carousel__hat div:after {
  background: var(--hatOdd);
  border-radius: 0 0 40px 40px;
  content: '';
  height: 20px;
  position: absolute;
  top: 140px;
  transform: translate(-50%, 0) rotateX(-65deg);
  transform-origin: top center;
  width: 40px;
}
@-webkit-keyframes carousel {
  from {
    transform: translate(-50%, -50%) rotateY(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateY(360deg);
  }
}
@keyframes carousel {
  from {
    transform: translate(-50%, -50%) rotateY(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateY(360deg);
  }
}
@-webkit-keyframes horse {
  0%, 100% {
    transform: translate(-50%, -50%) rotateY(calc(((-360 / var(--horses)) * var(--horse)) * 1deg)) translate3d(0, 0, calc(var(--depth) * 1px)) rotateY(180deg);
  }
  50% {
    transform: translate(-50%, 0) rotateY(calc(((-360 / var(--horses)) * var(--horse)) * 1deg)) translate3d(0, 0, calc(var(--depth) * 1px)) rotateY(180deg);
  }
}
@keyframes horse {
  0%, 100% {
    transform: translate(-50%, -50%) rotateY(calc(((-360 / var(--horses)) * var(--horse)) * 1deg)) translate3d(0, 0, calc(var(--depth) * 1px)) rotateY(180deg);
  }
  50% {
    transform: translate(-50%, 0) rotateY(calc(((-360 / var(--horses)) * var(--horse)) * 1deg)) translate3d(0, 0, calc(var(--depth) * 1px)) rotateY(180deg);
  }
}
</style>
</head>
<body>
  <div class="carousel">
  <div class="carousel__horses" style="--horses: 10">
    <div class="carousel__horse" style="--horse: 0; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 1; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 2; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 3; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 4; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 5; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 6; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 7; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 8; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 9; --delay: 0; --depth: 100">🎠</div>
    <div class="carousel__horse" style="--horse: 0; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 1; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 2; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 3; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 4; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 5; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 6; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 7; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 8; --delay: -0.5; --depth: 80">🎠</div>
    <div class="carousel__horse" style="--horse: 9; --delay: -0.5; --depth: 80">🎠</div>
  </div>
  <div class="carousel__base" style="--sides: 20">
    <div style="--side: 0"></div>
    <div style="--side: 1"></div>
    <div style="--side: 2"></div>
    <div style="--side: 3"></div>
    <div style="--side: 4"></div>
    <div style="--side: 5"></div>
    <div style="--side: 6"></div>
    <div style="--side: 7"></div>
    <div style="--side: 8"></div>
    <div style="--side: 9"></div>
    <div style="--side: 10"></div>
    <div style="--side: 11"></div>
    <div style="--side: 12"></div>
    <div style="--side: 13"></div>
    <div style="--side: 14"></div>
    <div style="--side: 15"></div>
    <div style="--side: 16"></div>
    <div style="--side: 17"></div>
    <div style="--side: 18"></div>
    <div style="--side: 19"></div>
  </div>
  <div class="carousel__core" style="--sides: 10">
    <div style="--side: 0"></div>
    <div style="--side: 1"></div>
    <div style="--side: 2"></div>
    <div style="--side: 3"></div>
    <div style="--side: 4"></div>
    <div style="--side: 5"></div>
    <div style="--side: 6"></div>
    <div style="--side: 7"></div>
    <div style="--side: 8"></div>
    <div style="--side: 9"></div>
  </div>
  <div class="carousel__hat" style="--sides: 20">
    <div style="--side: 0"></div>
    <div style="--side: 1"></div>
    <div style="--side: 2"></div>
    <div style="--side: 3"></div>
    <div style="--side: 4"></div>
    <div style="--side: 5"></div>
    <div style="--side: 6"></div>
    <div style="--side: 7"></div>
    <div style="--side: 8"></div>
    <div style="--side: 9"></div>
    <div style="--side: 10"></div>
    <div style="--side: 11"></div>
    <div style="--side: 12"></div>
    <div style="--side: 13"></div>
    <div style="--side: 14"></div>
    <div style="--side: 15"></div>
    <div style="--side: 16"></div>
    <div style="--side: 17"></div>
    <div style="--side: 18"></div>
    <div style="--side: 19"></div>
  </div>
</div>
</body>
</html>

2. Pure CSS Infinite Carousel

Made by J Warner. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
/* CSS Reset | https://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain) */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,menu,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,menu,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* BODY STYLES */
html, body {
	background: #12171b url(http://104.131.105.180/storage/app/media/patterns/subtle-carbon.png) repeat center top;
	max-width: 100%;
	overflow-x: hidden;
}

/* IMAGE CAROUSEL */
.carousel__caption {
	width: 340px;
	max-width: 80%;
	margin: 24px auto 0;
}
.carousel__caption p {
	font: 400 9px "Roboto", sans-serif !important;
	color: #c1c1c1 !important;
	text-align: left;
}
.carousel__caption a {
	text-decoration: underline;
	color: #fff;
}
.carousel {
	position: relative;
	width: 100%;
	height: 504px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	transform: translateZ(0px); /* stops flickering */
}
.carousel__buffer {
	display: none;
}
.carousel__buffer img {
	margin: 55px auto 18px;
	width: 553px;
	height: 347px;
}
.carousel__slide {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
	background: no-repeat center top;
	background-size: cover;
	overflow: auto;
}
.carousel__slide img {
	display: block;
	position: relative;
	margin: 55px auto 50px;
	width: 553px;
	height: 347px;
	-webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.8);
	-moz-box-shadow: 0 0 50px 0 rgba(0,0,0,0.8);
	box-shadow: 0 0 50px 0 rgba(0,0,0,0.8);
}

.carousel__input:checked + .carousel__slide {
	position: static;
	opacity: 1;
}
.carousel__arrow {
	position: absolute;
	display: none;
	cursor: pointer;
	background: #191919;
	top: 210px;
	left: 50%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	z-index: 10;
}
.carousel__arrow:before {
	position: absolute;
	content: "";
	padding: 8px; /* Arrow size */
	box-shadow: 1px -1px 0 1px #0072bc inset;
	-webkit-box-shadow: 2px -2px #0072bc inset;
	-moz-box-shadow: 2px -2px #0072bc inset;
	border: solid transparent;
	border-width: 0 0 2rem 2rem;
}
.carousel__arrow--prev {
	margin-left: -343px;
}
.carousel__arrow--prev:before {
	transform: rotate(45deg);
	margin: -4px 0 0 -24px;
}
.carousel__arrow--next {
	margin-left: 303px;
}
.carousel__arrow--next:before {
	transform: rotate(225deg);
	margin: -4px 0 0 15px;
}

#carousel__slide--1:checked ~ .carousel__arrow--1,
#carousel__slide--2:checked ~ .carousel__arrow--2,
#carousel__slide--3:checked ~ .carousel__arrow--3,
#carousel__slide--4:checked ~ .carousel__arrow--4,
#carousel__slide--5:checked ~ .carousel__arrow--5 {
	display: block;
}

.carousel__bullets {
	list-style: none;
	margin: 12px auto -6px;
	padding: 0;
	position: absolute;
	top: 408px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 10;
}
.carousel__bullets li {
	display: inline-block;
}
.carousel__bullets--bullet {
	cursor: pointer;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 4px 0;
	border-radius: 50%;
	background: rgba(0,0,0,0);
	border: 1px solid #6e7c7f;
}

#carousel__slide--1:checked ~ .carousel__arrow--1 ~ .carousel__bullets li:nth-child(1) .carousel__bullets--bullet,
#carousel__slide--2:checked ~ .carousel__arrow--2 ~ .carousel__bullets li:nth-child(2) .carousel__bullets--bullet,
#carousel__slide--3:checked ~ .carousel__arrow--3 ~ .carousel__bullets li:nth-child(3) .carousel__bullets--bullet,
#carousel__slide--4:checked ~ .carousel__arrow--4 ~ .carousel__bullets li:nth-child(4) .carousel__bullets--bullet,
#carousel__slide--5:checked ~ .carousel__arrow--5 ~ .carousel__bullets li:nth-child(5) .carousel__bullets--bullet {
	background: #0072bc;
	box-shadow: inset 0 0 0 2px #12171b; /* Separates blue dot from border */
}

@media screen and (max-width: 690px) {
	.carousel__buffer {
		width: 100%;
		position: relative;
		display: inline-block;
		visibility: hidden;
		z-index: -1;
		padding-bottom: 120px;
	}
	.carousel__buffer img {
		width: 100%;
		height: auto;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		margin-top: 0;
	}
	.carousel {
		height: auto;
		overflow: visible;
	}
	.carousel__slide {
		-webkit-transition: opacity 0s;
		-moz-transition: opacity 0s;
		-o-transition: opacity 0s;
		transition: opacity 0s;
		position: absolute;
		top:0;
		height: auto;
		background: transparent none !important;
	}
	.carousel__slide img {
		width: 100%;
		height: auto;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		margin-top: 0;
	}
	.carousel__arrow {
		top: calc(50% - 70px);
	}
	.carousel__arrow--prev {
		margin-left: -48%;
	}
	.carousel__arrow--next {
		margin-left: calc(48% - 40px);
	}
	.carousel__bullets {
		top: auto;
		bottom: 40px;
	}
}
</style>
</head>
<body>
  <section class="carousel">
	<input class="carousel__input" type="radio" id="carousel__slide--1" name="carousel" aria-hidden="true" hidden="" checked="checked">
	<div class="carousel__slide" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_back_1.jpg)">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_front_1.jpg">
		<div class="carousel__caption">
			<p>Aurora over the northern hemisphere, from the ISS (solar array visible to the right)<br/>Image: <a target="_blank" href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/04/living_being/15347247-1-eng-GB/Living_being_fullwidth.jpg">NASA/ESA</a></p>
		</div>
	</div>

	<input class="carousel__input" type="radio" id="carousel__slide--2" name="carousel" aria-hidden="true" hidden="">
	<div class="carousel__slide" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_back_2.jpg)">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_front_2.jpg">
		<div class="carousel__caption">
			<p>The Moon in the haze of Earth’s atmosphere; photographed by astronaut Scott Kelly<br/>Image: <a target="_blank" href="https://www.instagram.com/p/7rIJ1pwinV/">@whitehouse</a></p>
		</div>
	</div>

	<input class="carousel__input" type="radio" id="carousel__slide--3" name="carousel" aria-hidden="true" hidden="">
	<div class="carousel__slide" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_back_3.jpg)">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_front_3.jpg">
		<div class="carousel__caption">
			<p>Apollo 17 photo "The Blue Marble" is the first image to capture Antarctic ice sheet<br/>Image: <a target="_blank" href="https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/images/135918main_bm1_high.jpg?itok=2I8-uSUB">NASA</a></p>
		</div>
	</div>

	<input class="carousel__input" type="radio" id="carousel__slide--4" name="carousel" aria-hidden="true" hidden="">
	<div class="carousel__slide" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_back_4.jpg)">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_front_4.jpg">
		<div class="carousel__caption">
			<p>Soyuz spacecraft over the river Seine and most of France, captured from the ISS<br/>Image: <a target="_blank" href="https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/05/reflets_du_soleil_sur_les_meandres_de_la_seine/15969380-1-eng-GB/Reflets_du_Soleil_sur_les_meandres_de_la_Seine_node_full_image_2.jpg">ESA/Tim Peake</a></p>
		</div>
	</div>

	<input class="carousel__input" type="radio" id="carousel__slide--5" name="carousel" aria-hidden="true" hidden="">
	<div class="carousel__slide" style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_back_5.jpg)">
		<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/334248/earth_front_5.jpg">
		<div class="carousel__caption">
			<p>Buzz Aldrin on the Moon with Neil Armstrong reflected in his visor, July 20, 1969<br/>Image: <a target="_blank" href="https://www.nasa.gov/sites/default/files/images/337294main_pg62_as11-40-5903_full.jpg">NASA</a></p>
		</div>
	</div>
	
	<!-- ARROWS -->
	<label for="carousel__slide--5" class="carousel__arrow carousel__arrow--prev carousel__arrow--1"></label>
	<label for="carousel__slide--5" class="carousel__arrow carousel__arrow--next carousel__arrow--4"></label>
	<label for="carousel__slide--4" class="carousel__arrow carousel__arrow--prev carousel__arrow--5"></label>
	<label for="carousel__slide--4" class="carousel__arrow carousel__arrow--next carousel__arrow--3"></label>
	<label for="carousel__slide--3" class="carousel__arrow carousel__arrow--prev carousel__arrow--4"></label>
	<label for="carousel__slide--3" class="carousel__arrow carousel__arrow--next carousel__arrow--2"></label>
	<label for="carousel__slide--2" class="carousel__arrow carousel__arrow--prev carousel__arrow--3"></label>
	<label for="carousel__slide--2" class="carousel__arrow carousel__arrow--next carousel__arrow--1"></label>
	<label for="carousel__slide--1" class="carousel__arrow carousel__arrow--prev carousel__arrow--2"></label>
	<label for="carousel__slide--1" class="carousel__arrow carousel__arrow--next carousel__arrow--5"></label>

	<!-- BULLETS -->
	<ol class="carousel__bullets">
		<li>
			<label for="carousel__slide--1" class="carousel__bullets--bullet"></label>
		</li>
		<li>
			<label for="carousel__slide--2" class="carousel__bullets--bullet"></label>
		</li>
		<li>
			<label for="carousel__slide--3" class="carousel__bullets--bullet"></label>
		</li>
		<li>
			<label for="carousel__slide--4" class="carousel__bullets--bullet"></label>
		</li>
		<li>
			<label for="carousel__slide--5" class="carousel__bullets--bullet"></label>
		</li>
	</ol>
</section>
</body>
</html>

3. Pure CSS carousel dissolving images

Made by Denys Mishunov. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* DISSOLVE  */
/* EDIT the following values to adjust the carousel to yoru needs */
/* width of the carousel */
/* height of the carousel */
/* the number of items in the carousel */
/* time during which a carousel item is fully visible */
/* duration of the transition between two carousel items*/
/* END EDIT */
.dissolve {
  width: 287px;
  height: 430px;
  position: relative;
  overflow: hidden;
}
.dissolve .item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  animation: dissolve 20s linear infinite;
}
.dissolve .item:nth-child(2) {
  animation-delay: 5s;
}
.dissolve .item:nth-child(3) {
  animation-delay: 10s;
}
.dissolve .item:nth-child(4) {
  animation-delay: 15s;
}
/*
/* The keyframes calculations are based on assumption of 4 items in the carousel.
/* You should notice the pattern for your own calculations.
*/
/* If you plan to support Safari 4 for any reason, you *must* have 0% and 100% frames */
@-webkit-keyframes dissolve {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
}
@-moz-keyframes dissolve {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
}
@-ms-keyframes dissolve {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
}
@keyframes dissolve {
  0%,
  30%,
  100% {
    opacity: 0;
  }
  5%,
  25% {
    opacity: 1;
  }
}
/* Just a decoration */
@font-face {
  font-family: 'Trykker';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/trykker/v21/KtktALyWZJXudUPztN7iPQ.ttf) format('truetype');
}
img {
  max-width: 100%;
  display: block;
}
body {
  font-family: 'Trykker', serif;
  padding: 1em;
  background: transparent url('data:image/png;base64,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') repeat;
}
figure {
  width: 287px;
  margin: 10px auto 0;
}
figure .carousel {
  width: 287px;
  box-shadow: 0 0 0 10px #fff, 0 0.3em 0.8em 10px black;
}
figure figcaption {
  text-transform: uppercase;
  margin-top: 10px;
  padding-top: 0.5em;
  font-size: 1.2em;
  text-align: center;
  color: #999;
  text-shadow: 0 -0.1em 0 rgba(0, 0, 0, 0.6);
}
figure figcaption:before,
figure figcaption:after {
  content: "\2014";
  font-family: "Times New Roman", serif;
  text-shadow: none;
  color: rgba(255, 255, 255, 0.2);
}
figure figcaption:before {
  margin-right: 0.3em;
}
figure figcaption:after {
  margin-left: 0.3em;
}
figure p {
  color: #999;
  text-align: center;
}
figure p a {
  color: #06afd8;
}
</style>
</head>
<body>
  <figure>
<div class="carousel dissolve">
  <div class="items">
      <img class="item" src="https://farm8.staticflickr.com/7020/6767599565_e0ffee2813_d.jpg" alt="">
      <img class="item" src="https://farm8.staticflickr.com/7016/6767598507_21720ed21f_d.jpg" alt="Seven to ten at Leeds &amp; Holbeck">
      <img class="item" src="https://farm8.staticflickr.com/7163/6767596393_8f8b9609ec_d.jpg" alt="Banksy">
      <img class="item" src="https://farm8.staticflickr.com/7004/6767593255_ae68f10fac_d.jpg" alt="Bristol autumn">
   </div>
</div>
  <figcaption>Pure CSS carousel</figcaption>
  <p>You can find more carousel effects and other tricks in <a href="http://mishunov.me/lab">my front-end lab</a></p>
</figure>
</body>
</html>

4. Image blocks animated clip path carousel

Made by Joe O’Brien. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  background: #282c34;
  height: 100vh;
  display: flex;
}

.carousel {
  position: relative;
  width: 95vw;
  max-width: 650px;
  height: 95vw;
  max-height: 650px;
  overflow: hidden;
  margin: auto;
}

.carousel-nav {
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: 2.5vw;
  left: 0;
  right: 0;
  text-indent: -9999px;
  overflow: hidden;
}

.carousel-nav li {
  margin: 0 5px;
}

.carousel-nav a {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
}

.carousel-items {
  display: flex;
  height: 100%;
  overflow-x: hidden;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.carousel-item {
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  scroll-snap-align: start;
  justify-content: center;
  align-items: center;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  margin: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-clip-path: polygon(0 0, 0 50%, 20% 50%, 20% 50%, 0 50%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
          clip-path: polygon(0 0, 0 50%, 20% 50%, 20% 50%, 0 50%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  transition: -webkit-clip-path 1.25s;
  transition: clip-path 1.25s;
  transition: clip-path 1.25s, -webkit-clip-path 1.25s;
}

.carousel-item.active img {
  -webkit-animation: clipGradual 1.25s 1 forwards;
          animation: clipGradual 1.25s 1 forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.carousel-item:target img {
  -webkit-animation: clipGradualActive 1.25s 1 forwards;
          animation: clipGradualActive 1.25s 1 forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

@-webkit-keyframes clipGradual {
  20% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  60% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  80% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 3.5%, 72% 3.5%, 72% 100%, 100% 100%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 3.5%, 72% 3.5%, 72% 100%, 100% 100%, 100% 0);
  }
}

@keyframes clipGradual {
  20% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  60% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  80% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 3.5%, 72% 3.5%, 72% 100%, 100% 100%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 3.5%, 72% 3.5%, 72% 100%, 100% 100%, 100% 0);
  }
}
@-webkit-keyframes clipGradualActive {
  20% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  60% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  80% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 3.5%, 72% 3.5%, 72% 100%, 100% 100%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 3.5%, 72% 3.5%, 72% 100%, 100% 100%, 100% 0);
  }
}
@keyframes clipGradualActive {
  20% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 50%, 21% 50%, 21% 50%, 32% 50%, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 50%, 53% 50%, 53% 50%, 33% 50%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  60% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 50%, 71% 50%, 71% 50%, 54% 50%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  80% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 50%, 72% 50%, 72% 50%, 100% 50%, 100% 0);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 3.5%, 72% 3.5%, 72% 100%, 100% 100%, 100% 0);
            clip-path: polygon(0 0, 0 5%, 20% 5%, 20% 95%, 0 95%, 0 0, 32% 0, 32% 100%, 21% 100%, 21% 0, 32% 0, 32% 0, 33% 0, 33% 5%, 53% 5%, 53% 95%, 33% 95%, 33% 5%, 33% 0, 54% 0, 54% 15%, 71% 15%, 71% 97%, 54% 97%, 54% 0, 100% 0, 100% 3.5%, 72% 3.5%, 72% 100%, 100% 100%, 100% 0);
  }
}
</style>
</head>
<body>
  <div class="carousel">
  <ul class="carousel-items">
    <li id="item1" class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1592342539193-1494423123ef">
    </li>
    <li id="item2" class="carousel-item">
      <img src="https://images.unsplash.com/photo-1550087196-39944f130dd0">
    </li>
    <li id="item3" class="carousel-item">
      <img src="https://images.unsplash.com/photo-1585557313614-8f6021647112">
    </li>
  </ul>
</div>

<ul class="carousel-nav">
  <li><a href="#item1">1</a></li>
  <li><a href="#item2">2</a></li>
  <li><a href="#item3">2</a></li>
</ul>
 
</body>
</html>

5. Playlist Carousel

Made by AybΓΌke Ceylan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
<style>
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  font-family: "DM Sans", sans-serif;
  transition: background 0.4s ease-in;
  background-color: #c394f8;
}
body.blue {
  background-color: #428aa6;
}

input[type=radio] {
  display: none;
}

.card {
  position: absolute;
  width: 60%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform 0.4s ease;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: 800px;
  max-height: 600px;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 {
  transform: translatex(-40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 {
  transform: translatex(40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
}
#item-1:checked ~ .cards #song-1 img, #item-2:checked ~ .cards #song-2 img, #item-3:checked ~ .cards #song-3 img {
  box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}

.player {
  background-color: #fff;
  border-radius: 8px;
  min-width: 320px;
  padding: 16px 10px;
}

.upper-part {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  height: 36px;
  overflow: hidden;
}

.play-icon {
  margin-right: 10px;
}

.song-info {
  width: calc(100% - 32px);
  display: block;
}

.song-info .title {
  color: #403d40;
  font-size: 14px;
  line-height: 24px;
}

.sub-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.subtitle, .time {
  font-size: 12px;
  line-height: 16px;
  color: #c6c5c6;
}

.time {
  font-size: 12px;
  line-height: 16px;
  color: #a5a5a5;
  font-weight: 500;
  margin-left: auto;
}

.progress-bar {
  height: 3px;
  width: 100%;
  background-color: #e9efff;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  display: block;
  position: relative;
  width: 60%;
  height: 100%;
  background-color: #2992dc;
  border-radius: 6px;
}

.info-area {
  width: 100%;
  position: absolute;
  top: 0;
  left: 30px;
  transition: transform 0.4s ease-in;
}

#item-2:checked ~ .player #test {
  transform: translateY(0);
}

#item-2:checked ~ .player #test {
  transform: translateY(-40px);
}

#item-3:checked ~ .player #test {
  transform: translateY(-80px);
}
</style>
</head>
<body>
  <div class="container">
    <input type="radio" name="slider" id="item-1" checked>
    <input type="radio" name="slider" id="item-2">
    <input type="radio" name="slider" id="item-3">
  <div class="cards">
    <label class="card" for="item-1" id="song-1">
      <img src="https://images.unsplash.com/photo-1530651788726-1dbf58eeef1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=882&q=80" alt="song">
    </label>
    <label class="card" for="item-2" id="song-2">
      <img src="https://images.unsplash.com/photo-1559386484-97dfc0e15539?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80" alt="song">
    </label>
    <label class="card" for="item-3" id="song-3">
      <img src="https://images.unsplash.com/photo-1533461502717-83546f485d24?ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="song">
    </label>
  </div>
  <div class="player">
    <div class="upper-part">
      <div class="play-icon">
        <svg width="20" height="20" fill="#2992dc" stroke="#2992dc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-play" viewBox="0 0 24 24">
          <defs/>
          <path d="M5 3l14 9-14 9V3z"/>
        </svg>
      </div>
      <div class="info-area" id="test">
        <label class="song-info" id="song-info-1">
          <div class="title">Bunker</div>
          <div class="sub-line">
            <div class="subtitle">Balthazar</div>
            <div class="time">4.05</div>
          </div>
        </label>
        <label class="song-info" id="song-info-2">
          <div class="title">Words Remain</div>
          <div class="sub-line">
            <div class="subtitle">Moderator</div>
            <div class="time">4.05</div>
          </div>
        </label>
        <label class="song-info" id="song-info-3">
          <div class="title">Falling Out</div>
          <div class="sub-line">
            <div class="subtitle">Otzeki</div>
            <div class="time">4.05</div>
          </div>
        </label>
      </div>
    </div>
    <div class="progress-bar">
      <span class="progress"></span>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
      <script>
$('input').on('change', function () {
  $('body').toggleClass('blue');
});
    </script>
</body>
</html>

6. Responsive Sliding Carousel

Made by januaryofmine. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.carousel-wrapper {
  width: 520px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
  border-radius: 20px;
  margin: 100px auto 20px;
}

.carousel-container {
  width: 400px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel {
  display: flex;
  width: 1200px;
  animation: sliding 12s infinite;
}
.carousel div {
  width: 400px;
  height: 250px;
  background-size: cover;
  background-position: center;
}
.carousel:hover {
  animation-play-state: paused;
}
.carousel .image-one {
  background-image: url("https://images.unsplash.com/photo-1480936600919-bffa6b7ecf1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}
.carousel .image-two {
  background-image: url("https://images.unsplash.com/photo-1475053081036-c8eb31d187b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}
.carousel .image-three {
  background-image: url("https://images.unsplash.com/photo-1525278070609-779c7adb7b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

@keyframes sliding {
  30% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-400px);
  }
  65% {
    transform: translateX(-400px);
  }
  70% {
    transform: translateX(-800px);
  }
  98% {
    transform: translateX(-800px);
  }
  100% {
    transform: translateX(0);
  }
}
@media screen and (max-width: 768px) {
  .carousel-wrapper {
    width: 312px;
    height: 210px;
  }

  .carousel-container {
    width: 240px;
    height: 150px;
  }

  .carousel {
    width: 720px;
  }
  .carousel > div {
    width: 240px;
    height: 150px;
  }

  @keyframes sliding {
    30% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(-240px);
    }
    65% {
      transform: translateX(-240px);
    }
    70% {
      transform: translateX(-480px);
    }
    98% {
      transform: translateX(-480px);
    }
    100% {
      transform: translateX(0);
    }
  }
}
</style>
</head>
<body>
  <div class="carousel-wrapper">
  <div class="carousel-container">
    <div class="carousel">
      <div class="image-one"></div>
      <div class="image-two"></div>
      <div class="image-three"></div>
    </div>
  </div>
</div>
</body>
</html>

7. CSS-Tricks Card Carousel

Made by William Goldsworthy. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background-color: #100e17;
  font-family: 'Open Sans', sans-serif;
}

.container {
  position: absolute;
  height: 300px;
  width: 600px;
  top: 60px;
  left: calc(50% - 300px);
  display: flex;
}

.card {
  display: flex;
  height: 280px;
  width: 200px;
  background-color: #17141d;
  border-radius: 10px;
  box-shadow: -1rem 0 3rem #000;
/*   margin-left: -50px; */
  transition: 0.4s ease-out;
  position: relative;
  left: 0px;
}

.card:not(:first-child) {
    margin-left: -50px;
}

.card:hover {
  transform: translateY(-20px);
  transition: 0.4s ease-out;
}

.card:hover ~ .card {
  position: relative;
  left: 50px;
  transition: 0.4s ease-out;
}

.title {
  color: white;
  font-weight: 300;
  position: absolute;
  left: 20px;
  top: 15px;
}

.bar {
  position: absolute;
  top: 100px;
  left: 20px;
  height: 5px;
  width: 150px;
}

.emptybar {
  background-color: #2e3033;
  width: 100%;
  height: 100%;
}

.filledbar {
  position: absolute;
  top: 0px;
  z-index: 3;
  width: 0px;
  height: 100%;
  background: rgb(0,154,217);
  background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%);
  transition: 0.6s ease-out;
}

.card:hover .filledbar {
  width: 120px;
  transition: 0.4s ease-out;
}

.circle {
  position: absolute;
  top: 150px;
  left: calc(50% - 60px);
}

.stroke {
  stroke: white;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: 0.6s ease-out;
}

svg {
  fill: #17141d;
  stroke-width: 2px;
}

.card:hover .stroke {
  stroke-dashoffset: 100;
  transition: 0.6s ease-out;
}
</style>
</head>
<body>
  <head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400" rel="stylesheet">
</head>
<body>
<div class="container">
  <div class="card">
    <h3 class="title">Card 1</h3>
    <div class="bar">
      <div class="emptybar"></div>
      <div class="filledbar"></div>
    </div>
    <div class="circle">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle class="stroke" cx="60" cy="60" r="50"/>
    </svg>
    </div>
  </div>
  <div class="card">
    <h3 class="title">Card 2</h3>
    <div class="bar">
      <div class="emptybar"></div>
      <div class="filledbar"></div>
    </div>
    <div class="circle">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle class="stroke" cx="60" cy="60" r="50"/>
    </svg>
    </div>
  </div>
  <div class="card">
    <h3 class="title">Card 3</h3>
    <div class="bar">
      <div class="emptybar"></div>
      <div class="filledbar"></div>
    </div>
    <div class="circle">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle class="stroke" cx="60" cy="60" r="50"/>
    </svg>
    </div>
  </div>
  <div class="card">
    <h3 class="title">Card 4</h3>
    <div class="bar">
      <div class="emptybar"></div>
      <div class="filledbar"></div>
    </div>
    <div class="circle">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
      <circle class="stroke" cx="60" cy="60" r="50"/>
    </svg>
    </div>
  </div>
</div>
</body>
</body>
</html>

8. Pure CSS Carousel with Thumbnails

Made by Ronny Siikaluoma. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
section {
  background: #F4F4F4;
  padding: 50px 0;
}

.container {
  max-width: 1044px;
  margin: 0 auto;
  padding: 0 20px;
}

.carousel {
  display: block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}
.carousel > input {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.carousel > input:nth-of-type(6):checked ~ .carousel__slides .carousel__slide:first-of-type {
  margin-left: -500%;
}
.carousel > input:nth-of-type(5):checked ~ .carousel__slides .carousel__slide:first-of-type {
  margin-left: -400%;
}
.carousel > input:nth-of-type(4):checked ~ .carousel__slides .carousel__slide:first-of-type {
  margin-left: -300%;
}
.carousel > input:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:first-of-type {
  margin-left: -200%;
}
.carousel > input:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:first-of-type {
  margin-left: -100%;
}
.carousel > input:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type {
  margin-left: 0%;
}
.carousel > input:nth-of-type(1):checked ~ .carousel__thumbnails li:nth-of-type(1) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}
.carousel > input:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}
.carousel > input:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}
.carousel > input:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}
.carousel > input:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}
.carousel > input:nth-of-type(6):checked ~ .carousel__thumbnails li:nth-of-type(6) {
  box-shadow: 0px 0px 0px 5px rgba(0, 0, 255, 0.5);
}

.carousel__slides {
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
}

.carousel__slide {
  position: relative;
  display: block;
  flex: 1 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 300ms ease-out;
  vertical-align: top;
  box-sizing: border-box;
  white-space: normal;
}
.carousel__slide figure {
  display: flex;
  margin: 0;
}
.carousel__slide div {
  position: relative;
  width: 100%;
}
.carousel__slide div:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 66.6666666667%;
}
.carousel__slide div > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.carousel__slide img {
  display: block;
  flex: 1 1 auto;
  object-fit: cover;
}
.carousel__slide figcaption {
  align-self: flex-end;
  padding: 20px 20px 0 20px;
  flex: 0 0 auto;
  width: 25%;
  min-width: 150px;
}
.carousel__slide .credit {
  margin-top: 1rem;
  color: rgba(0, 0, 0, 0.5);
  display: block;
}
.carousel__slide.scrollable {
  overflow-y: scroll;
}

.carousel__thumbnails {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  margin: 0 -10px;
}
.carousel__slides + .carousel__thumbnails {
  margin-top: 20px;
}
.carousel__thumbnails li {
  flex: 1 1 auto;
  max-width: calc((100% / 6) - 20px);
  margin: 0 10px;
  transition: all 300ms ease-in-out;
}
.carousel__thumbnails label {
  display: block;
  position: relative;
}
.carousel__thumbnails label:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}
.carousel__thumbnails label > img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.carousel__thumbnails label:hover, .carousel__thumbnails label:focus {
  cursor: pointer;
}
.carousel__thumbnails label:hover img, .carousel__thumbnails label:focus img {
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.25);
  transition: all 300ms ease-in-out;
}
.carousel__thumbnails img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
</head>
<body>
  <section>
    <div class="container">
        <div class="carousel">
            <input type="radio" name="slides" checked="checked" id="slide-1">
            <input type="radio" name="slides" id="slide-2">
            <input type="radio" name="slides" id="slide-3">
            <input type="radio" name="slides" id="slide-4">
            <input type="radio" name="slides" id="slide-5">
            <input type="radio" name="slides" id="slide-6">
            <ul class="carousel__slides">
                <li class="carousel__slide">
                    <figure>
                        <div>
                            <img src="https://picsum.photos/id/1041/800/450" alt="">
                        </div>
                        <figcaption>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            <span class="credit">Photo: Tim Marshall</span>
                        </figcaption>
                    </figure>
                </li>
                <li class="carousel__slide">
                    <figure>
                        <div>
                            <img src="https://picsum.photos/id/1043/800/450" alt="">
                        </div>
                        <figcaption>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            <span class="credit">Photo: Christian Joudrey</span>                            
                        </figcaption>
                    </figure>
                </li>
                <li class="carousel__slide">
                    <figure>
                        <div>
                            <img src="https://picsum.photos/id/1044/800/450" alt="">
                        </div>
                        <figcaption>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            <span class="credit">Photo: Steve Carter</span>                            
                        </figcaption>
                    </figure>
                </li>
                <li class="carousel__slide">
                    <figure>
                        <div>
                            <img src="https://picsum.photos/id/1045/800/450" alt="">
                        </div>
                        <figcaption>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            <span class="credit">Photo: Aleksandra Boguslawska</span>                            
                        </figcaption>
                    </figure>
                </li>
                <li class="carousel__slide">
                    <figure>
                        <div>
                            <img src="https://picsum.photos/id/1049/800/450" alt="">
                        </div>
                        <figcaption>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            <span class="credit">Photo: Rosan Harmens</span>                            
                        </figcaption>
                    </figure>
                </li>
                <li class="carousel__slide">
                    <figure>
                        <div>
                            <img src="https://picsum.photos/id/1052/800/450" alt="">
                        </div>
                        <figcaption>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            <span class="credit">Photo: Annie Spratt</span>                            
                        </figcaption>
                    </figure>
                </li>
            </ul>    
            <ul class="carousel__thumbnails">
                <li>
                    <label for="slide-1"><img src="https://picsum.photos/id/1041/150/150" alt=""></label>
                </li>
                <li>
                    <label for="slide-2"><img src="https://picsum.photos/id/1043/150/150" alt=""></label>
                </li>
                <li>
                    <label for="slide-3"><img src="https://picsum.photos/id/1044/150/150" alt=""></label>
                </li>
                <li>
                    <label for="slide-4"><img src="https://picsum.photos/id/1045/150/150" alt=""></label>
                </li>
                <li>
                    <label for="slide-5"><img src="https://picsum.photos/id/1049/150/150" alt=""></label>
                </li>
                <li>
                    <label for="slide-6"><img src="https://picsum.photos/id/1052/150/150" alt=""></label>
                </li>
            </ul>
        </div>
    </div>
</section>
</body>
</html>

9. Simple Pure css carousel

Made by TianyiLi. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body {
  margin: 0;
  padding: 0;
}

.pic-ctn {
  width: 100vw;
  height: 200px;
}

@keyframes display {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  10% {
    transform: translateX(0);
    opacity: 1;
  }
  20% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(-200px);
    opacity: 0;
  }
}

.pic-ctn {
  position: relative;
  width: 100vw;
  height: 300px;
  margin-top: 15vh;
}

.pic-ctn > img {
  position: absolute;
  top: 0;
  left: calc(50% - 100px);
  opacity: 0;
  animation: display 10s infinite;
}

img:nth-child(2) {
  animation-delay: 2s;
}
img:nth-child(3) {
  animation-delay: 4s;
}
img:nth-child(4) {
  animation-delay: 6s;
}
img:nth-child(5) {
  animation-delay: 8s;
}
</style>
</head>
<body>
  <div class="pic-ctn">
    <img src="https://picsum.photos/200/300?t=1" alt="" class="pic">
    <img src="https://picsum.photos/200/300?t=2" alt="" class="pic">
    <img src="https://picsum.photos/200/300?t=3" alt="" class="pic">
    <img src="https://picsum.photos/200/300?t=4" alt="" class="pic">
    <img src="https://picsum.photos/200/300?t=5" alt="" class="pic">
  </div>
</body>
</html>

10. CSS Variables 3D Carousel

Made by Chris Neale. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  height: 600px;
  margin: 0;
  display: grid;
  grid-template-rows: 500px 100px;
  grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
  align-items: center;
  justify-items: center;
}

main#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 100vw;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 5;
  --middle: 3;
  --position: 1;
  pointer-events: none;
}

div.item {
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: coral;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(-10deg * var(--r)))
    translateX(calc(-300px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}

div.item:nth-of-type(1) {
  --offset: 1;
  background-color: #90f1ef;
}
div.item:nth-of-type(2) {
  --offset: 2;
  background-color: #ff70a6;
}
div.item:nth-of-type(3) {
  --offset: 3;
  background-color: #ff9770;
}
div.item:nth-of-type(4) {
  --offset: 4;
  background-color: #ffd670;
}
div.item:nth-of-type(5) {
  --offset: 5;
  background-color: #e9ff70;
}

input:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
  --position: 1;
}

input:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
  --position: 2;
}

input:nth-of-type(3) {
  grid-column: 4 /5;
  grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
  --position: 3;
}

input:nth-of-type(4) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
  --position: 4;
}

input:nth-of-type(5) {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
  --position: 5;
}
</style>
</head>
  <body>
  <input type="radio" name="position" checked />
  <input type="radio" name="position" />
  <input type="radio" name="position" />
  <input type="radio" name="position" />
  <input type="radio" name="position" />
  <main id="carousel">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <main>
</body>
</html>

11. A CSS-only Carousel Slider

Made by Christian Schaefer. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@keyframes tonext {
  75% {
    left: 0;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0;
  }
}

@keyframes tostart {
  75% {
    left: 0;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0;
  }
}

@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}

body {
  max-width: 37.5rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: 'Lato', sans-serif;
}

* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /* thumb and track color */
  scrollbar-width: 0px;
}

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}

* {
  -ms-overflow-style: none;
}

ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel {
  position: relative;
  padding-top: 75%;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}

.carousel__viewport {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  counter-reset: item;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.carousel__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  background-color: #f99;
  counter-increment: item;
}

.carousel__slide:nth-child(even) {
  background-color: #99f;
}

.carousel__slide:before {
  content: counter(item);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-40%,70px);
  color: #fff;
  font-size: 2em;
}

.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

@media (hover: hover) {
  .carousel__snapper {
    animation-name: tonext, snap;
    animation-timing-function: ease;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }

  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__snapper {
    animation-name: none;
  }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-name: none;
}

.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}

.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
  position: absolute;
  top: 0;
  margin-top: 37.5%;
  width: 4rem;
  height: 4rem;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 0;
  outline: 0;
}

.carousel::before,
.carousel__prev {
  left: -1rem;
}

.carousel::after,
.carousel__next {
  right: -1rem;
}

.carousel::before,
.carousel::after {
  content: '';
  z-index: 1;
  background-color: #333;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  font-size: 2.5rem;
  line-height: 4rem;
  text-align: center;
  pointer-events: none;
}

.carousel::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}

.carousel::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}
</style>
</head>
<body>
  <h1>CSS-only Carousel</h1>

<p>This carousel is created with HTML and CSS only.</p>

<section class="carousel" aria-label="Gallery">
  <ol class="carousel__viewport">
    <li id="carousel__slide1"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper">
        <a href="#carousel__slide4"
           class="carousel__prev">Go to last slide</a>
        <a href="#carousel__slide2"
           class="carousel__next">Go to next slide</a>
      </div>
    </li>
    <li id="carousel__slide2"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide1"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide3"
         class="carousel__next">Go to next slide</a>
    </li>
    <li id="carousel__slide3"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide2"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide4"
         class="carousel__next">Go to next slide</a>
    </li>
    <li id="carousel__slide4"
        tabindex="0"
        class="carousel__slide">
      <div class="carousel__snapper"></div>
      <a href="#carousel__slide3"
         class="carousel__prev">Go to previous slide</a>
      <a href="#carousel__slide1"
         class="carousel__next">Go to first slide</a>
    </li>
  </ol>
  <aside class="carousel__navigation">
    <ol class="carousel__navigation-list">
      <li class="carousel__navigation-item">
        <a href="#carousel__slide1"
           class="carousel__navigation-button">Go to slide 1</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide2"
           class="carousel__navigation-button">Go to slide 2</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide3"
           class="carousel__navigation-button">Go to slide 3</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide4"
           class="carousel__navigation-button">Go to slide 4</a>
      </li>
    </ol>
  </aside>
</section>
</body>
</html>