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 & 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>