Table of Contents
In this article we will learn how to create a simple text carousel using CSS only. We will integrate the CSS with Elementor heading elements, to create our Elementor text slider.
Note that all the CSS snippets provided below were first passed through the autoprefixer, for greater browser compatibility. That's why they look a bit different than in the video.
Optionally, you can get the three designs (2, 3 and 4 texts carousels) in this download:
Elementor Text Carousel Templates
This download gets you the following templates :
Elementor Text Carousel Template
You will get a template for the two texts, three texts and four texts versions.
Related tutorial : 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;
-webkit-animation: tcarousel 10s ease infinite;
animation: tcarousel 10s ease infinite;
}
.textcarousel2{
opacity: 0;
-webkit-animation: tcarousel 10s ease -5s infinite;
animation: tcarousel 10s ease -5s infinite;
}
@-webkit-keyframes tcarousel{
0%{
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
pointer-events: none;
}
8%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
46%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
56%{
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
pointer-events: none;
}
100%{
opacity: 0;
pointer-events: none;
}
}
@keyframes tcarousel{
0%{
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
pointer-events: none;
}
8%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
46%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
56%{
opacity: 0;
-webkit-transform: translateX(-30px);
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{
-webkit-animation: tcarousel 15s ease infinite;
animation: tcarousel 15s ease infinite;
}
.textcarousel2{
-webkit-animation: tcarousel 15s ease -5s infinite;
animation: tcarousel 15s ease -5s infinite;
}
.textcarousel3{
-webkit-animation: tcarousel 15s ease 5s infinite;
animation: tcarousel 15s ease 5s infinite;
}
@-webkit-keyframes tcarousel{
0%{
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
pointer-events: none;
}
6%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
30%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
36%{
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
pointer-events: none;
}
100%{
opacity: 0;
pointer-events: none;
}
}
@keyframes tcarousel{
0%{
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
pointer-events: none;
}
6%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
30%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
36%{
opacity: 0;
-webkit-transform: translateX(-30px);
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{
-webkit-animation: tcarousel 20s ease infinite;
animation: tcarousel 20s ease infinite;
}
.textcarousel2{
-webkit-animation: tcarousel 20s ease -5s infinite;
animation: tcarousel 20s ease -5s infinite;
}
.textcarousel3{
-webkit-animation: tcarousel 20s ease 5s infinite;
animation: tcarousel 20s ease 5s infinite;
}
.textcarousel4{
-webkit-animation: tcarousel 20s ease 10s infinite;
animation: tcarousel 20s ease 10s infinite;
}
@-webkit-keyframes tcarousel{
0%{
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
pointer-events: none;
}
6%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
24%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
30%{
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
pointer-events: none;
}
100%{
opacity: 0;
pointer-events: none;
}
}
@keyframes tcarousel{
0%{
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
pointer-events: none;
}
6%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
24%{
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
pointer-events: all;
}
30%{
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
pointer-events: none;
}
100%{
opacity: 0;
pointer-events: none;
}
}
Extra: to pause the carousel on hover
In the video, I mentioned this would not be possible without JavaScript... Well just after completing the recording, I realised in fact it was quite simple to pause it with some CSS. Here it is! Just add this CSS, and it will pause the carousel on hover.
Important: 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;
}
Conclusion
I hope you enjoyed this tutorial. Let me know if everything worked out alright!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
26 Responses
Maxime, is there a way to remove the whitespace created by the HTML widget? I mean I can see a little white pixel, like around 1 px of whitespace above the section I created for the CSS/HTML widget. Merci!
Go under Advanced > position > absolute. That will take care of that!
Hello, is there any chance to do this with 6 elements? I can't get the timing right.
hey, how to get one with 8 elements ?
Understand the CSS, and replicate for 8 elements!
fantastic. you're a genius sir. please what particular section do i need to effect to replicate it for 6 or 8 elements?
Study the CSS a bit and try to understand the logic, and see the differences between the different versions. Then you will be able to write a version for any amount of elements!
hello, have you make it at 6 or 8 elements?
actually i need 5 elements. can you please help me with this?
Hey Asif!
Read the CSS, try to understand it and how it works, notice the difference between the 3 and 4 texts version, and then replicate the setup for what you need!
Hey, im facing a problem, for four texts, it is overlapping
decrease the timing in the CSS a bit
Hello,
I would keep the border radius on images (30px) but this piece of code bellow transform the border radius on 0px. How can I do? Thanks
body .elementor-section .swiper-slide {
overflow: visible;
}
try
body .elementor-section .swiper-slide img {
border-radius:30px;
}
Thanks a lot for your feedback! It's not working... images are still square
At this point I'd need to see your page to know what's going on.
Please find here the link to access to screen shot of the page with and without css code, let me know if you need another information or screen shot? I'm happy to drop it to you
https://drive.google.com/drive/folders/12btGUNq5MhlgyUv2x_s3Dd7cLtaO7VUt?usp=sharing
Sorry Sam I can't work with screenshots
What do you need to see the page? user access?
Please find here the link to access to screen shot of the page with and without css code, let me know if you need another information or screen shot? I'm happy to drop it to you
I need the front end URL please.
I have created two separate 3 text carousels in two different sections. But only one is showing. Other one i snot visible at all. Any idea on how to solve it.
It should be working fine... you should only have the CSS code one time on the page. Maybe you have some other setting hiding that section ?
This code is pure genius! It was surprising that I could not find a widget to do precisely the job you have here, and then I came across your video and website. It was a massive help on a project I'm doing for a client! Thank you so much.
Welcome! Really glad it could help you out.
How do you speed up the scroll effect?
Simply adjust the timings in the CSS!