Best practice for creating an arrow though image gallery?

[jtruax303]

So I have loaded an array of images and added one to my stage. Basically I want to click through the image sprites that I have loaded with the left and right arrow keys.

 

I thought about adding them all to the stage on top of each other and using z-index, but I feel like there would be a better way of filtering though all my loaded images. Plus I read through this documentation and was pretty confused implementing it. 

Here is my code so far. Its not much as I am new to pixi and still learning, but any information would be helpful. 

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

    PIXI.utils.sayHello(type)

    // Aliases
    let Application = PIXI.Application,
        loader = PIXI.loader,
        resources = PIXI.loader.resources,
        Sprite = PIXI.Sprite;

    //Create a pixi application
    let app = new PIXI.Application({
      width: 2000,
      height: 2000,
      transparent: false,
      antialias: true,
      resolution: 1

    })

    //Add the canvas that Pixi automatically created for you to the html document
    document.body.appendChild(app.view);

    loader
      .add([
      "lib/book1.png",
      "lib/book2.png",
      "lib/book3.png",
      "lib/book4.png",
      "lib/book5.png"
      ])
      .load(setup);

      //Define any variables that are used in more than one function
      let cam;

      // Setup function
      function setup() {

        // Creating cam sprite from image
        cam = new Sprite(resources["lib/book1.png"].texture
      );
        cam.width = 400;
        cam.height = 300;

        app.stage.addChild(cam)

  </script>

 

[AnDG]

This is very simple in PIXI, if you want to consider the z-index of the elements you can use the setChildIndex of their container. Simply, elements added with the same container will be added to the previous element. However, you can use addChildAt or setChildrenIndex to do so.

[jtruax303]

and just to clarify (to make sure I am grasping this), here both sprites are being added to the same container which is the stage for the application "app" correct?