Super Easy Elementor Text Carousel

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:

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!

Comments

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

Leave a Reply