Super Easy Elementor Text Carousel

Super Easy Elementor Text Carousel

Just launched! Checkout the CSS Course for Elementor users.

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

Name your price $

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.

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

Checkout the Elementor Addon Finder directly

Comments

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

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.