multiple_div_image_slider

(()=>{
  let ContainerNode = CreateRootNode();
  ContainerNode.id = "scroll_div";
  
  let leftNode = document.createElement("DIV");
  let topNode = document.createElement("DIV");
  let textNode = document.createElement("DIV");
  
  textNode.appendChild(document.createTextNode("RECENTLY VIEWED"));
  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");
  rightleNode.className = "js-carousel-next";
  
  let button = CreateButton("&#8249");
  leftNode.className = "js-carousel-prev";
  leftNode.appendChild(button);
  
  let nextButton = CreateButton("&#8250");
  
  rightleNode.appendChild(nextButton);
  
  ContainerNode.appendChild(textNode);
  topNode.appendChild(leftNode);
  topNode.appendChild(rightleNode);
  ContainerNode.appendChild(topNode);
  ContainerNode.appendChild(middleNode);
  
  let carousel = document.createElement("div");
  carousel.className = "js-product-carousel";
  carousel.style.margin = "20px";
  let carousel__view = document.createElement("div");
  
  carousel__view.className = "carousel__view";
  let viewStyle = {
    width: `calc((200px * 4) + 22px)`,
    height: "263px",
    background: "white",
    boxShadow: "0 1px 8px #888",
    margin: "auto",
    overflow: "hidde",
    position: "relative",
    overflow: "hidden",
  };
  Object.assign(carousel__view.style, { ...viewStyle });
  
  carousel.appendChild(carousel__view);
  
  let list = document.createElement("ul");
  list.className = "js-product-list";
  let product_list = {
    position: "absolute",
    margin: "0",
    padding: "0",
    transition: "transform 0.6s",
    transform: "translateX(0px)",
    listStyle: "none",
    height: "300px",
  };
  Object.assign(list.style, { ...product_list });
  
  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"));
    });
  }
  let imageDomList = [];
  
  for (let index = 0; index < ImageArray.length; index++) {
    console.log(ImageArray[index]);
    imageDomList.push(createImage(ImageArray[index]));
  }
  if (imageDomList.length < 1) {
    root_div.appendChild(document.createTextNode("No item selected"));
  }
  for (let index = 0; index < imageDomList.length; index++) {
    let li = document.createElement("li");
    li.className = "product-list__item";
  
    let product_list__item = {
      width: "200px",
      height: "auto",
      display: "inline-block",
      marginLeft: "5px",
      backgroundColor: "blue",
    };
    Object.assign(li.style, { ...product_list__item });
  
    let div = document.createElement("div");
    div.className = "product";
    let productStyle = {
      display: "table",
      height: "100%",
      width: "100%",
    };
    Object.assign(div.style, { ...productStyle });
    div.appendChild(imageDomList[index]);
  
    let span = document.createElement("span");
    span.appendChild(document.createTextNode("number"));
    let productSpanStyle = {
      display: "table-cell",
      verticalAlign: "middle",
      textAlign: "center",
      color: "white",
      fontSize: "50px",
    };
    Object.assign(span.style, { ...productSpanStyle });
  
    div.appendChild(span);
    li.appendChild(div);
    list.appendChild(li);
  }
  carousel__view.appendChild(list);
  
  middleNode.appendChild(carousel);
  let root_div = document.getElementById("shopify-section-1606229029a7d8d547");
  root_div.appendChild(ContainerNode);
  
  var carousels = document.querySelectorAll(".js-product-carousel");
  
  [].forEach.call(carousels, function (carousel) {
    carouselize(carousel);
  });
  
  function carouselize(carousel) {
    var productList = carousel.querySelector(".js-product-list");
    var productListWidth = 0;
    var productListSteps = 0;
    var products = carousel.querySelectorAll(".product");
    var productAmount = 0;
    var productAmountVisible = 4;
    var carouselPrev = carousel.querySelector(".js-carousel-prev");
    var carouselNext = carousel.querySelector(".js-carousel-next");
  
    [].forEach.call(products, function (product) {
      productAmount++;
      productListWidth += 250;
      productList.style.width = productListWidth + "px";
    });
  
    leftNode.addEventListener("click", function (e) {
      if (productListSteps > 0) {
        productListSteps--;
        moveProductList();
      }
    });
    rightleNode.addEventListener("click", function (e) {
      if (productListSteps < productAmount - productAmountVisible) {
        productListSteps++;
        moveProductList();
      }
    });
  
    function moveProductList() {
      productList.style.transform =
        "translateX(-" + 205 * productListSteps + "px)";
    }
  }
  
  function CreateRootNode() {
    let ContainerNode = document.createElement("DIV");
    ContainerNode.style.display = "flex";
    ContainerNode.style.justifyContent = "center";
    ContainerNode.style.padding = "15px";
    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;
  }
  
  function createImage(url) {
    let div = document.createElement("DIV");
    div.style.marginRight = "5px";
    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.appendChild(imageNode);
  
    return div;
  }
  
  leftNode.addEventListener("click", function (e) {});
  
})()