This code creates an auto-rotating carousel in CSS. The carousel displays images with a rotating effect. It helps showcase multiple images in a visually appealing way.
You can use this code on your website’s homepage to showcase featured products or images. It adds dynamic visual appeal, engaging visitors and keeping them interested. It’s easy to implement and enhances the overall user experience.
How to Create Auto Rotating Carousel In Css
1. First of all, load the Normalize CSS by adding the following CDN links into the head tag of your HTML document.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
2. Set up the HTML structure for your carousel. Wrap your images within a container element and assign a class to it. Inside this container, create individual panels for each image using div elements. Give each panel a unique ID.
<div class="container">
<div class="carousel">
<div id="panel-1" class="panel" style="background-image:url(&singleQuote;http://cdn.flipboard.com/dev_O/topics/exercise-157321849/large.jpg&singleQuote;)"></div>
<div id="panel-2" class="panel" style="background-image:url(&singleQuote;http://cdn.flipboard.com/dev_O/topics/diy-184313204/large.jpg&singleQuote;)"></div>
<div id="panel-3" class="panel" style="background-image:url(&singleQuote;http://cdn.flipboard.com/dev_O/topics/style-158630429/large.jpg&singleQuote;)"></div>
<div id="panel-4" class="panel" style="background-image:url(&singleQuote;https://cdn.flipboard.com/flipboard.com/614df686f2928791f617c5fb01265527f60bc4c3/original.jpg&singleQuote;)"></div>
<div id="panel-5" class="panel" style="background-image:url(&singleQuote;http://cdn.flipboard.com/dev_O/topics/photography-175399294/large.jpg&singleQuote;)"></div>
<div id="panel-6" class="panel" style="background-image:url(&singleQuote;http://cdn.flipboard.com/dev_O/topics/diy-184313204/large.jpg&singleQuote;)"></div>
<div id="panel-7" class="panel" style="background-image:url(&singleQuote;http://hbu.h-cdn.co/assets/16/17/1461881933-index-porch-swing.jpg&singleQuote;)"></div>
<div id="panel-8" class="panel" style="background-image:url(&singleQuote;http://cdn-media-2.lifehack.org/wp-content/files/2016/05/22072352/Paleo-Diet-1024x682.jpg&singleQuote;)"></div>
<div id="panel-9" class="panel" style="background-image:url(&singleQuote;http://cdn-media-2.lifehack.org/wp-content/files/2016/05/22072352/Paleo-Diet-1024x682.jpg&singleQuote;)"></div>
</div>
</div>
</div>
3. Next, style your carousel using CSS. Define the dimensions and positioning for the container and panels. Use transformations to create the rotating effect. You can also customize the appearance of each panel, such as the background color or image.
body {
background: #edf2f3;
-webkit-font-smoothing: antialiased;
font-family: "Open Sans", sans-serif;
}
.container {
height: 100px;
width: 200px;
margin: 0 auto;
-webkit-perspective: 600px;
padding: 100px 0;
}
.container h1 {
color: #000;
}
.carousel {
position: relative;
height: 100px;
width: 200px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(-500px);
-webkit-animation: turn 16s linear infinite;
-webkit-animation-play-state: run;
}
.carousel:hover {
-webkit-animation-play-state: paused;
}
.carousel .panel {
position: absolute;
height: 100px;
width: 200px;
top: 50%;
margin-top: -50px;
left: 12px;
border-radius: 5px;
text-align: center;
background-size: cover;
background-position: center center;
background-blend-mode: overlay;
text-transform: uppercase;
}
.carousel .panel .shadow {
margin-top: 40%;
color: Black;
text-shadow: 1px 1px white, 2px 2px white, 3px 3px white;
-webkit-animation: text 3s ease-in-out infinite alternate;
}
.carousel .panel .shadow:hover {
position: relative;
top: -3px;
left: -3px;
text-shadow: 1px 1px white, 2px 2px white, 3px 3px white, 4px 4px white, 5px 5px white, 6px 6px white;
}
#panel-1 {
-webkit-transform: rotateY(0deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #F9DEC9, #F9DEC9);
box-shadow: inset 5px 5px 10px #F9DEC9, inset -5px -5px 10px #F9DEC9;
}
#panel-2 {
-webkit-transform: rotateY(40deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #99B2DD, #99B2DD);
box-shadow: inset 5px 5px 10px #99B2DD, inset -5px -5px 10px #99B2DD;
}
#panel-3 {
-webkit-transform: rotateY(80deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #E9AFA3, #E9AFA3);
box-shadow: inset 5px 5px 10px #E9AFA3, inset -5px -5px 10px #E9AFA3;
}
#panel-4 {
-webkit-transform: rotateY(120deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #685044, #685044);
box-shadow: inset 5px 5px 10px #685044, inset -5px -5px 10px #685044;
}
#panel-5 {
-webkit-transform: rotateY(160deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #59C3C3, #59C3C3);
box-shadow: inset 5px 5px 10px #59C3C3, inset -5px -5px 10px #59C3C3;
}
#panel-6 {
-webkit-transform: rotateY(200deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #84A98C, #84A98C);
box-shadow: inset 5px 5px 10px #84A98C, inset -5px -5px 10px #84A98C;
}
#panel-7 {
-webkit-transform: rotateY(240deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #CAD2C5, #CAD2C5);
box-shadow: inset 5px 5px 10px #CAD2C5, inset -5px -5px 10px #CAD2C5;
}
#panel-8 {
-webkit-transform: rotateY(280deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #EBEBEB, #EBEBEB);
box-shadow: inset 5px 5px 10px #EBEBEB, inset -5px -5px 10px #EBEBEB;
}
#panel-9 {
-webkit-transform: rotateY(320deg) translateZ(400px);
background-image: -webkit-linear-gradient(top left, #00cdd4, #00cdd4);
box-shadow: inset 5px 5px 10px #00cdd4, inset -5px -5px 10px #00cdd4;
}
@-webkit-keyframes turn {
0% {
-webkit-transform: translateZ(-500px) rotateY(360deg);
}
100% {
-webkit-transform: translateZ(-500px) rotateY(0deg);
}
}
@-webkit-keyframes text {
0% {
-webkit-transform: rotateZ(-10deg);
}
100% {
-webkit-transform: rotateZ(10deg);
}
}
Experiment with different CSS properties to personalize your carousel further.
That’s all! hopefully, you have successfully created an Auto Rotating Carousel on your website. If you have any questions or suggestions, feel free to comment below.
