imageslider

(() => {
  let ContainerNode = CreateRootNode();

  let leftNode = document.createElement("DIV");
  let topNode = document.createElement("DIV");
  topNode.style.display = "flex";
  topNode.style.justifyContent = "flex-end";
  topNode.style.width = "40%";

  let middleNode = document.createElement("DIV");
  middleNode.style.display = "flex";

  let rightleNode = document.createElement("DIV");

  let button = CreateButton("&#8249");
  leftNode.appendChild(button);

  let nextButton = CreateButton("&#8250");

  rightleNode.appendChild(nextButton);

  topNode.appendChild(leftNode);
  topNode.appendChild(rightleNode);
  ContainerNode.appendChild(topNode);
  ContainerNode.appendChild(middleNode);

  let ImageArray = [];

  let ImageUrls = window.theme.recentlyViewed.recent;
  if (ImageUrls) {
    let keys = Object.keys(window.theme.recentlyViewed.recent);
    keys.forEach((key) => {
      ImageArray.push(ImageUrls[key].featuredImage.replace("{width}", "600"));
    });
  } else {
    return "no selected image";
  }
  let imageDomList = [];

  for (let index = 0; index < ImageArray.length; index++) {
    console.log(ImageArray[index]);
    imageDomList.push(createImage(ImageArray[index]));
  }
  if (imageDomList.length < 1) {
    return;
  }

  let visibleIndex = [];
  if (imageDomList.length == 1) {
    visibleIndex = [0];
  }
  if (imageDomList.length == 2) visibleIndex = [0, 1];
  if (imageDomList.length > 3) visibleIndex = [0, 1, 2];

  visibleIndex.map((item) => {
    middleNode.appendChild(imageDomList[item]);
  });

  let root_div = document.getElementById("shopify-section-1606229029a7d8d547");

  let index = 2;

  leftNode.addEventListener("click", function (e) {
    imageDomList[
      visibleIndex[0]
    ].style.transform = `translateY(-${window.innerWidth}px)`;

    setTimeout(() => {
      visibleIndex.map((i) => {
        imageDomList[i].style.transform = `translateX(${0}px)`;
        middleNode.removeChild(imageDomList[i]);
      });
      if (visibleIndex[0] > 0) {
        visibleIndex.unshift(visibleIndex[0] - 1);
        visibleIndex.pop();
      }

      visibleIndex.map((i) => {
        middleNode.appendChild(imageDomList[i]);
      });
    }, 700);
  });

  rightleNode.addEventListener("click", function (e) {
    if (visibleIndex[visibleIndex.length - 1] < imageDomList.length - 1) {
      imageDomList[
        visibleIndex[0]
      ].style.transform = `translateX(-${window.innerWidth}px)`;
    }

    setTimeout(() => {
      if (visibleIndex[visibleIndex.length - 1] < imageDomList.length - 1) {
        visibleIndex.map((i) => {
          imageDomList[i].style.transform = `translateY(${0}px)`;
          if (imageDomList[i]) {
            middleNode.removeChild(imageDomList[i]);
          }
        });
        visibleIndex.shift();
        visibleIndex.push(visibleIndex[visibleIndex.length - 1] + 1);
        visibleIndex.map((i) => {
          middleNode.appendChild(imageDomList[i]);
        });
      }
    }, 700);
  });

  root_div.appendChild(ContainerNode);
})();

function createImage(url) {
  let div = document.createElement("DIV");
  let imageNode = document.createElement("IMG");
  imageNode.setAttribute("src", url);
  imageNode.setAttribute("max-width", "200");
  imageNode.setAttribute("height", "auto");
  imageNode.setAttribute("alt", "The Pulpit Rock");
  imageNode.style.backgroundRepeat = "no-repeat";
  imageNode.style.backgroundSize = "cover";
  imageNode.style.backgroundPosition = "center";
  imageNode.style.maxWidth = "200px";
  imageNode.style.height = "auto";
  div.style.transition = "transform 600ms ease-in-out";

  div.appendChild(imageNode);

  return div;
}

function CreateRootNode() {
  let ContainerNode = document.createElement("DIV");
  ContainerNode.style.display = "flex";
  ContainerNode.style.justifyContent = "center";
  ContainerNode.style.padding = "10px";
  ContainerNode.style.flexDirection = "column";
  ContainerNode.style.alignItems = "center";
  ContainerNode.style.margin = "0 0 0 10px ";
  return ContainerNode;
}

function CreateButton(icon) {
  let button = document.createElement("button");
  button.innerHTML = icon;
  button.style.background = "gray";
  button.style.backgroundColor = "#f1f1f1";
  button.style.color = "black";
  button.style.borderRadius = "50%";
  button.style.width = "31px";
  return button;
}