fabianhacker

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!