I have 3 sets of images. I want to:

1. Show set 1 (will be visible on page load)
2. Hide set 1 and show set 2
3. Hide set 2 and show set 3
4. Loop back to start

I am using Velocity.js however im stuggling to think of the best way to structure this.

This kinda gets me close, but I need to almost tell Velocity to wait until a set is finished before it starts on the next one:

    const products = [
    "shoes",
    "tablet",
    "cushion",
    "phonecase",
    "sticker",
    "t-shirt",
    "cup",
    "jacket",
  ];

  let set1 = [];
  products.forEach((product) => {
    set1.push(document.getElementById(`hero-${product}-1`));
  });

  let set2 = [];
  products.forEach((product) => {
    set2.push(document.getElementById(`hero-${product}-2`));
  });
  let set3 = [];
  products.forEach((product) => {
    set3.push(document.getElementById(`hero-${product}-3`));
  });

  set1.forEach((item, index) => {
    Velocity(
      item,
      {
        opacity: 0,
      },
      {
        loop: true,
        delay: 30000 + 100 * index,
      }
    );
  });

  set2.forEach((item, index) => {
    Velocity(
      item,
      {
        opacity: 1,
      },
      {
        loop: true,
        delay: 20000 + 100 * index,
      }
    );
  });

  set3.forEach((item, index) => {
    Velocity(
      item,
      {
        opacity: 1,
      },
      {
        loop: true,
        delay: 10000 + 100 * index,
      }
    );
  });