Super Easy Elementor Text Carousel

Super Easy Elementor Text Carousel

Just Released: 10 Popular Web Hosts Tested In Depth

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

<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!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2701 Elements right here:

Checkout the Elementor Addon Finder directly

27 Responses

  1. 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!

    1. 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!

      1. 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!

  2. 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;
    }

      1. Thanks a lot for your feedback! It's not working... images are still square

      2. At this point I'd need to see your page to know what's going on.

  3. 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

  4. 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.

  5. 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 ?

  6. 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.

  7. 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)?

Leave a Reply