This is by far one of the most useful videos about this since many of them have the word “free” in the tittle, but you always have to have the pro version of elementor to use the plugins 🥲 Thank si much sir :3
Awesome video! Now that I have the carousel, I just have a question a want to diminish the height or thickness of the section where the heading is but I'm not able to do it, can you tell me?
@@elementhow691 I did many changes but the text disappears after applying code. FYI, I am just making changes in the class and applying it. Is it right, please help. I have a subheading with textcarousel3 and textcarousel4. I am trying to make the appear at the same time when their respective heading will appear i.e. textcarousel=textcarousel3 and textcarousel2=textcarousel4 Please help 🙏
decrease the timing values you will see in the CSS ( 10s , 15s , 20s ) You will also need to proportionally decrease the animation delays (-5s, 5s, 10s)
Thank you, but the version for 4 texts is not working for me for some reason. Is there an issue with the code? Like the first text does not appear, the other 3 work.
Hey Loth! Code is tested working fine. You can even see my own demo on my website, it's using the 4 texts version, and it's working as it should. There might be an error somewhere in your setup. Maybe a class name that's not where it should be, or a class name that should be there but isn't. Go through everything carefully again, it should work! Be certain to look from the front end though, sometimes in the editor, it needs a refresh to show everything properly.
Hey there, Great Video. I was looking for a way to make price table as carousel for mobile version. Do you think I can accomplish this with the method in video if I use price table text/content in place of the heading you put in the video? Again, Great Video! Thanks
Yea Mohammad! Even if I don't mention this in the video, the exact same technique (and the same code) will work for all elements! So you can make a similar carousel out of any Elementor elements!
@@elementhow691 man u just had to tickle the right spot. I was stuck at this thought for over a few days now. now i think i can work something out! Thanks a lot man!
Ok, Thanks 🙏🏻 unfortunately I don’t really know how to do that…but maybe one day you’ll consider to do that…😅 Joking apart, it would be great to have a text carousel on the “top header bar” plus an animated call to action, don’t you think so? Thanks 🙏🏻
I've done this but before the words start to slide like in your video there are a few seconds where all the words appear at the same time overlapping, then the animation start as in the video. How can I fix this? 🥲
really helpful, been searching this for ages, ty so much
OMG!!! Thank you SOOO MUCH. I was after this for so long! Life saver!
Welcome Munique!
It save my time to find a way to make a certain page like that. Thank you and thumb ups
Glad it was helpful!
This is so brilliant! Thank you very much!
Welcome Richard!
I loved! thank you so much! greetings from Mexico
This is by far one of the most useful videos about this since many of them have the word “free” in the tittle, but you always have to have the pro version of elementor to use the plugins 🥲 Thank si much sir :3
Thank you so much for the code - it is working beautifully for our website!
Welcome!
brilliant tutorial, thx and god bless you. Regards from hong kong ^_^
Hi, congratulations for the video! One question...If I want the text movement position to be vertical instead of horizontal, how can I do that?
Up...
You would need to change the CSS animation for that, to animate translateY instead of translateX
Thanks for this video! Really helpful and super useful. On mobile however, the start of my carousel is all overlapped. Do you know a way to fix this?
Message me with your URL. find my info in the footer of my website.
All my textcarousel(1-4) are overlapped at the beginning
@@elementhow691 SENT
Thank you so much for posting your code, it was a tremendous help on a project!
Welcome Spencer!
Awesome!!! Thank You So much!!! You are so appreciated!!! Worked perfectly!!
This is amazing ! Thank you so much for sharing your work 👍
Awesome video! Now that I have the carousel, I just have a question a want to diminish the height or thickness of the section where the heading is but I'm not able to do it, can you tell me?
Awesome video. CSS code is working for heading but when I apply the same code to subheading and change the classes it disappears. Can you please help?
Try again, this should work.
Your CSS seems incomplete
@@elementhow691 I did many changes but the text disappears after applying code. FYI, I am just making changes in the class and applying it. Is it right, please help. I have a subheading with textcarousel3 and textcarousel4. I am trying to make the appear at the same time when their respective heading will appear i.e. textcarousel=textcarousel3 and textcarousel2=textcarousel4
Please help 🙏
hi @@elementhow691 I will be really thankful of you if you could help me. 🙏
Thank you so much!! I was looking for a plugin that does that and I couldn't find any (they are all slider images)
you saved me!!
You're very welcome!
How can I change the order in which the animation runs? Currently the 4 text code executes the animation like this: 1-4-3-2
Great!! One question: how do i speed up the carousel?
decrease the timing values you will see in the CSS ( 10s , 15s , 20s )
You will also need to proportionally decrease the animation delays (-5s, 5s, 10s)
Hi, the CSS code doesn't seem to work on my Elementor. I can't save the code after adding it. It shows server error. May I know what's the issue?
Thank you, but the version for 4 texts is not working for me for some reason. Is there an issue with the code? Like the first text does not appear, the other 3 work.
Hey Loth! Code is tested working fine. You can even see my own demo on my website, it's using the 4 texts version, and it's working as it should.
There might be an error somewhere in your setup. Maybe a class name that's not where it should be, or a class name that should be there but isn't. Go through everything carefully again, it should work!
Be certain to look from the front end though, sometimes in the editor, it needs a refresh to show everything properly.
Thank you Maxime ☺️
Thanks for the video
awesome!
thanks for this video!!!!
Welcome! And Yes, this can be used with dynamic tags and links!
Hey there, Great Video. I was looking for a way to make price table as carousel for mobile version. Do you think I can accomplish this with the method in video if I use price table text/content in place of the heading you put in the video? Again, Great Video! Thanks
Yea Mohammad! Even if I don't mention this in the video, the exact same technique (and the same code) will work for all elements! So you can make a similar carousel out of any Elementor elements!
@@elementhow691 man u just had to tickle the right spot. I was stuck at this thought for over a few days now. now i think i can work something out! Thanks a lot man!
Can I add a LottiFiles animation (clickable) next to the text?
Not really no. It would require additional custom coding!
Ok, Thanks 🙏🏻 unfortunately I don’t really know how to do that…but maybe one day you’ll consider to do that…😅 Joking apart, it would be great to have a text carousel on the “top header bar” plus an animated call to action, don’t you think so? Thanks 🙏🏻
Thanks a lot
Hi, where is the code?
i'm getting sever error
gracias maxime
Welcome!
This is the modified CSS code
.textcarousel-3a,
.textcarousel-4a {
pointer-events: none;
opacity: 00;
}
.textcarousel-3a {
opacity: 0;
animation: tcarousel 10s ease infinite;
}
.textcarousel-4a {
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;
}
}
There has to be a widget for this
I've done this but before the words start to slide like in your video there are a few seconds where all the words appear at the same time overlapping, then the animation start as in the video. How can I fix this? 🥲