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
“Want to learn a new skill in graphic designing using Canva and more?
Unlock your creative potential with easy-to-follow tutorials and tips!
👉Click Here To Learn More to get started today
Plus, when you make a purchase through our link, you support us in bringing you more valuable content. Let’s grow together!”
Note: 👉Click Here To Learn More”
/* 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;
}
}
.carouselparent:hover .textcarousel, .carouselparent:hover .textcarousel2, .carouselparent:hover .textcarousel3,.carouselparent:hover .textcarousel4{
animation-play-state: paused;
}
“Want to learn a new skill in graphic designing using Canva and more?
Unlock your creative potential with easy-to-follow tutorials and tips!
👉Click Here To Learn More to get started today
Plus, when you make a purchase through our link, you support us in bringing you more valuable content. Let’s grow together!”
Note: 👉Click Here To Learn More”