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.
Here is what we will be creating (4 text version)
Save yourself some time and get the template here:
You must be logged in to download this template. Login here
Then import the template on your Elementor page.
The template has the 4 text version. For another version, swap the code with one of the code snippets below.
Code for the Elementor text carousel with two texts
<script> /* Please login to get the code * The code will be for the Super Easy Elementor Text Carousel tutorial * Found at this URL https://element.how/elementor-text-carousel/ */ </script>
Code for the Elementor text carousel with three texts
<script> /* Please login to get the code * The code will be for the Super Easy Elementor Text Carousel tutorial * Found at this URL https://element.how/elementor-text-carousel/ */ </script>
Code for the Elementor text carousel with four texts
<script> /* Please login to get the code * The code will be for the Super Easy Elementor Text Carousel tutorial * Found at this URL https://element.how/elementor-text-carousel/ */ </script>
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!
<script> /* Please login to get the code * The code will be for the Super Easy Elementor Text Carousel tutorial * Found at this URL https://element.how/elementor-text-carousel/ */ </script>
Conclusion
I hope you enjoyed this tutorial. Let me know if everything worked out alright!
40 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!
In this code, the animation carousels from right to left, is it possible to rotate through the texts vertically (come in from the top to bottom for example)?
Yes, you would need to adjust the CSS animations from translateX to translateY!
He. Thx for this nice tutorial. It works fine exept one thing. If I use the suggested "position absolute" for the second heading, in the new version of elementor the element goes all the way to the left (and not top). I can set the vertical offset to a value that brings it back to the center, but this is the value in the development setting. With changing screen width the position of this element is always changing. Of course since it is fixed. Do you have a solution for that?
Hey Karsten!
Try importing my template, see if it works as it should and everything is centered.
Hi Maxime,
yes and no. I downloaded your template and imporded it. It worked as section but not in a container. I plan on using it above my header and my header consists of a container. An idea on this? https://app.screencast.com/Pj1CvURZeFKko
Greetings Karsten,
I updated the tutorial with a Container version of the template, please download that one and import it.
Cheers!
Hey Karsten!
Just set the container that wraps the Heading elements to justify-content: center; and align-items: center;
Then, empty the value fields for Left and Top, for absolute settings, for all the Heading elements.
That should center the texts!
Hi Maxime, can you double check? The template I downloaded above has a) 5 Header and scrolling is also inconsistent and overlapping...
Love this! So glad I signed up for your site. These tutorials are great. I made my own text slider. Got 21 headings to slide last night. Then I returned to it today and now only 4 slides. Any insight into what I can add would much appreciated!:
<style>/* For 21 texts */
.textcarousel,
.textcarousel2,
.textcarousel3,
.textcarousel4,
.textcarousel5,
.textcarousel6,
.textcarousel7,
.textcarousel8,
.textcarousel9,
.textcarousel10,
.textcarousel11,
.textcarousel12,
.textcarousel13,
.textcarousel14,
.textcarousel15,
.textcarousel16,
.textcarousel17,
.textcarousel18,
.textcarousel19,
.textcarousel20,
.textcarousel21 {
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;
}
}
</style>
Hey Jacquelyn!
Sorry it gets complex. I suggest people stick to 3 or 4, as anyhow visitors won't sit and watch this for hours either... I think beyond 4 there isn't much of a point, and if there is a point, then it means that the user should have control (so a carousel would be better).
Cheers!
Hmm ok!
I've been trying to add:
".textcarousel5 {
animation: tcarousel 20s ease 5s infinite;
} and so on for each one but it jumbles the text...
can any 1 give me for 9 elements
I have notice the difference and set the code like this for 5 text and its still overlapping
please do have a look and please let me know how can I do this with (9 text elements)
<style>
/* For 5 texts */
.textcarousel,
.textcarousel2,
.textcarousel3,
.textcarousel4,
.textcarousel5{
pointer-events: none;
opacity: 0;
}
.textcarousel {
animation: tcarousel 25s ease infinite;
}
.textcarousel2 {
animation: tcarousel 25s ease -5s infinite;
}
.textcarousel3 {
animation: tcarousel 25s ease 5s infinite;
}
.textcarousel4 {
animation: tcarousel 25s ease 10s infinite;
}
.textcarousel5 {
animation: tcarousel 25s ease 15s 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;
}
}
</style>