Super Easy Elementor Text Carousel
Code for the Elementor text carousel with two texts
/* For 2 texts */
.textcarousel,
.textcarousel2 {
pointer-events: none;
opacity: 0;
}
.textcarousel {
opacity: 0;
animation: tcarousel 10s ease infinite;
}
.textcarousel2 {
opacity: 0;
animation: tcarousel 10s ease -5s infinite;
}
@keyframes tcarousel {
0% {
opacity: 0;
transform: translateX(30px);
pointer-events: none;
}
8% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
46% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
56% {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
}
100% {
opacity: 0;
pointer-events: none;
}
}
Code for the Elementor text carousel with three texts
/* For 3 texts */
.textcarousel,
.textcarousel2,
.textcarousel3 {
pointer-events: none;
opacity: 0;
}
.textcarousel {
animation: tcarousel 15s ease infinite;
}
.textcarousel2 {
animation: tcarousel 15s ease -5s infinite;
}
.textcarousel3 {
animation: tcarousel 15s ease 5s infinite;
}
@keyframes tcarousel {
0% {
opacity: 0;
transform: translateX(30px);
pointer-events: none;
}
6% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
30% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
36% {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
}
100% {
opacity: 0;
pointer-events: none;
}
}
Code for the Elementor text carousel with four texts
/* For 4 texts */
.textcarousel,
.textcarousel2,
.textcarousel3,
.textcarousel4 {
pointer-events: none;
opacity: 0;
}
.textcarousel {
animation: tcarousel 20s ease infinite;
}
.textcarousel2 {
animation: tcarousel 20s ease -5s infinite;
}
.textcarousel3 {
animation: tcarousel 20s ease 5s infinite;
}
.textcarousel4 {
animation: tcarousel 20s ease 10s infinite;
}
@keyframes tcarousel {
0% {
opacity: 0;
transform: translateX(30px);
pointer-events: none;
}
6% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
24% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
30% {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
}
100% {
opacity: 0;
pointer-events: none;
}
}
Extra: to pause the carousel on hover
I mentioned that JavaScript was necessary for this feature. However, shortly after recording, I realized it can actually be done quite simply with CSS. Just add the following CSS to pause the carousel on hover.
Note: Make sure to add the class ‘carouselparent’ to the parent section for this to work!
.carouselparent:hover .textcarousel, .carouselparent:hover .textcarousel2, .carouselparent:hover .textcarousel3,.carouselparent:hover .textcarousel4{
animation-play-state: paused;
}