Help with jQuery image preloader


I need a small help on a jQuery preloader function for image slider. If anyone can help me, it will be great.

Actually I have purchased a html css business website template from and now I need to do the changes according to my need.

You can check the preview here -

The issue is -

In this template, there is a slider at home page. My images will be much heavier and rich with graphics that I will replace in this template.

Now I need a preloader or image preloader which will show when every image will load. So my site visitors can see that something is loading.

The script calling the slider is -

auto: false,
pager: true,
nav: true,
speed: 500,
maxwidth: 1140,
namespace: "centered-btns"

I am new at jquery. Can I add a loading function here? Can anyone provide me a jquery preload function? Every image should load individually and not all together. There will be 4 slider images.