Applying Depth Map to DIVs in a Carousel

Hello, forum! I am currently struggling to rework my photography website after having purchased a template several months ago. I did not get the time to do much but now I am little free. In a nutshell, I have 5 Bootstrap-like carousel divs on the first page, representing different types of photography. Of course, each of them has a  background image. I would post the website but I do not want to risk "promoting" myself, so I will post (hopefully I get permission by the moderator) the original template: https://theme.madsparrow.me/emilynolan/ . I am not associated with their website. As you can see, the user can scroll through some divs, with its own images. I have managed to use Pixi.js to apply a DepthMap to one of the divs, but I have no idea how I can do for 4 other divs which are supposed to translate into view when the user scrolls, presses RIGHT key or presses next.

The code is:

<script> 
      let type = "WebGL"
       if(!PIXI.utils.isWebGLSupported()){
      type = "canvas"
    }

      PIXI.utils.sayHello(type);

      let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
      document.body.appendChild(app.view);

      let img = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel.jpg");
      img.width = window.innerWidth;
      img.height = window.innerHeight;
      app.stage.addChild(img);

      depthMap = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel-map.jpg");
      app.stage.addChild(depthMap);


      displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
      app.stage.filters = [displacementFilter];

      app.renderer.view.style.position = "absolute";
      app.renderer.view.style.display = "block";
      app.renderer.autoResize = true;
      app.renderer.resize(window.innerWidth, window.innerHeight);

      window.onmousemove = function(e) {
        displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) / 40;
        displacementFilter.scale.x = (window.innerHeight / 2 - e.clientY) / 10;
      }; 

</script>  --> 

Needless to say, it is not perfect and has lots of issues, for example the window does NOT autoresize at all and also the animation is horrible, not smooth at all. But at least I would like to be able to append several images to multiple divs. Is this possible in any way, please? I did not work much with JS in my life and I am new to Pixi.