How to center align Text in carousel?
Problem
I'm trying to create simple text carousel using pure css3 (NO Javascript). With the help of few references; I managed to write code mentioned below:
<!DOCTYPE html>
<html>
<head>
<style>
#carousel p:nth-child(1) {
opacity: 1.0;
-webkit-transform: translateX(87px);
-moz-transform: translateX(87px);
-ms-transform: translateX(87px);
-o-transform: translateX(87px);
transform: translateX(87px);
animation:carousel1 10s infinite;
-webkit-animation:carousel1 10s infinite; /* Safari and Chrome */
}
#carousel p:nth-child(2) {
opacity: 0.0;
animation:carousel2 10s infinite;
-webkit-animation:carousel2 10s infinite; /* Safari and Chrome */
}
#carousel p:nth-child(3) {
opacity: 0.0;
-webkit-transform: translateX(-87px);
-moz-transform: translateX(-87px);
-ms-transform: translateX(-87px);
-o-transform: translateX(-87px);
transform: translateX(-87px);
animation:carousel3 10s infinite;
-webkit-animation:carousel3 10s infinite; /* Safari and Chrome */
}
@keyframes carousel1 {
0%, 100% {opacity: 1.0;}
33% {opacity: 0.0;}
66% {opacity: 0.0;}
}
@-webkit-keyframes carousel1 {
0%, 100% {opacity: 1.0;}
33% {opacity: 0.0;}
66% {opacity: 0.0;}
}
@keyframes carousel2 {
0%, 100% {opacity: 0.0;}
33% {opacity: 1.0;}
66% {opacity: 0.0;}
}
@-webkit-keyframes carousel2 {
0%, 100% {opacity: 0.0;}
33% {opacity: 1.0;}
66% {opacity: 0.0;}
}
@keyframes carousel3 {
0%, 100% {opacity: 0.0;}
33% {opacity: 0.0;}
66% {opacity: 1.0;}
}
@-webkit-keyframes carousel3 {
0%, 100% {opacity: 0.0;}
33% {opacity: 0.0;}
66% {opacity: 1.0;}
}
</style>
</head>
<body>
<div id="carousel">
<P> One is here </p>
<P> Two is here </p>
<P> Three is here </p>
</div>
</body>
</html>
In this code, text is getting mis aligned; can you please help to fix same. Carosuel; must be infinite and text should come in the middle.
Problem courtesy of: Pawan Mude
Solution
Please Try This:
<!DOCTYPE html>
<html>
<head>
<style>
#carousel p { text-align: center; position: relative; }
#carousel p:nth-child(1) {
opacity: 1.0;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
animation:carousel1 10s infinite;
-webkit-animation:carousel1 10s infinite; /* Safari and Chrome */
}
#carousel p:nth-child(2) {
opacity: 0.0;
animation:carousel2 10s infinite;
-webkit-animation:carousel2 10s infinite; /* Safari and Chrome */
}
#carousel p:nth-child(3) {
opacity: 0.0;
animation:carousel3 10s infinite;
-webkit-animation:carousel3 10s infinite; /* Safari and Chrome */
}
@keyframes carousel1 {
0%, 100% {opacity: 1.0;}
33% {opacity: 0.0;}
66% {opacity: 0.0;}
}
@-webkit-keyframes carousel1 {
0%, 100% {opacity: 1.0;}
33% {opacity: 0.0;}
66% {opacity: 0.0;}
}
@keyframes carousel2 {
0%, 100% {opacity: 0.0;}
33% {opacity: 1.0;}
66% {opacity: 0.0;}
}
@-webkit-keyframes carousel2 {
0%, 100% {opacity: 0.0;}
33% {opacity: 1.0;}
66% {opacity: 0.0;}
}
@keyframes carousel3 {
0%, 100% {opacity: 0.0;}
33% {opacity: 0.0;}
66% {opacity: 1.0;}
}
@-webkit-keyframes carousel3 {
0%, 100% {opacity: 0.0;}
33% {opacity: 0.0;}
66% {opacity: 1.0;}
}
</style>
</head>
<body>
<div id="carousel">
<p> One is here </p>
<p> Two is here </p>
<p> Three is here </p>
</div>
</body>
</html>
This fiddle will work: http://jsfiddle.net/6zZra/
UPDATE: http://jsfiddle.net/rajmathan/Uq4Jk/
Solution courtesy of: rajmathan
Discussion
There is currently no discussion for this recipe.
This recipe can be found in it's original form on Stack Over Flow.