Add a pagination to Elementor’s background slider

In this short tutorial I will show you how to add a pagination to Elementor’s background slider. 

So first create your container, select Slideshow in the Style tab and add your images. After that add an ID e.g. main-slider to your container in the Advanced tab. In the same tab add the following css:

					selector .fh-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

selector .fh-pagination .swiper-pagination-bullet {
    margin: 0 10px;
    background: #fff;
    opacity: 1;

selector .fh-pagination .swiper-pagination-bullet-active {
    background: var( --e-global-color-secondary );

You can change the background colors like you want.


After that go to your WordPress dashboard and add some JavaScript in Elementor -> Custom Code. Create a new file, choose the </body> – End location and load jQuery. Now insert this snippet:


Instead of main-slider you have to use your ID of your container.


That’s it!