<div class="wrap">
  <input type="file" multiple accept="image/*" />
  <button>generate</button>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

button {
  padding: 0.25em;
  font-family: monospace;
  text-transform: uppercase;
  cursor: pointer;
}

.darken {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

.slider {
  width: 100%;
  display: inherit;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

figure {
  margin: 0.5em;
  width: 300px;
  display: inherit;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
}

figcaption {
  font-size: 1.2em;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 0.25em;
  color: #ddd;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
}

img {
  max-width: 80%;
  max-height: 80vh;
  cursor: pointer;
}

.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  background: none;
  border: none;
  outline: none;
  filter: invert();
}

.left {
  left: 2em;
}

.right {
  right: 2em;
}

.close {
  top: 2em;
  right: 1em;
}
let button = document.querySelector("button");
button.addEventListener("click", generateGallery);

function generateGallery() {
  let input = document.querySelector("input");
  if (input.files.length == 0) return;
  let files = input.files;
  let i;

  let wrap = document.querySelector(".wrap");
  document.body.removeChild(wrap);

  let slider = document.createElement("div");
  slider.className = "slider";
  document.body.appendChild(slider);

  for (i = 0; i < files.length; i++) {
    let file = files[i];
    let src = URL.createObjectURL(file);
    let name = file.name;
    /*let src = `img/${name}`;*/

    let figure = document.createElement("figure");
    slider.appendChild(figure);

    let figcaption = document.createElement("figcaption");
    let regexp = /.+(?=\.)/;
    name = name.match(regexp);
    figcaption.innerText = name[0];
    figure.appendChild(figcaption);

    let img = document.createElement("img");
    img.src = src;
    figure.appendChild(img);
  }

  let figures = document.querySelectorAll("figure");
  for (i = 0; i < figures.length; i++) {
    let figure = figures[i];
    figure.addEventListener("click", () => {
      generateSlider(figure);
    });
  }

  function generateSlider(figure) {
    darkenBack();

    function darkenBack() {
      if (document.querySelector(".darken") == null) {
        let div = document.createElement("div");
        div.className = "darken";
        document.body.appendChild(div);
      } else {
        let div = document.querySelector(".darken");
        document.body.removeChild(div);
      }
    }

    for (i = 0; i < figures.length; i++) {
      if (figures[i].hasAttribute("style")) {
        figures[i].removeAttribute("style");
      } else {
        figures[i].setAttribute(
          "style",
          "margin: 0; width: auto; position: absolute; opacity: 0;"
        );
      }
    }

    if (figure.hasAttribute("style")) {
      figure.style.opacity = 1;
      generateButtons();
    } else generateButtons();

    function generateButtons() {
      if (document.querySelector(".buttons") == null) {
        let buttons = document.createElement("div");
        buttons.className = "buttons";
        slider.appendChild(buttons);

        let leftButton = document.createElement("button");
        leftButton.className = "button left";
        let leftImg = document.createElement("img");
        leftImg.src =
          "https://harryheman.github.io/imageGallerySliderMaker/assets/left.svg";
        leftButton.appendChild(leftImg);
        buttons.appendChild(leftButton);
        leftButton.addEventListener("click", () => changeSlide("-"));

        let rightButton = document.createElement("button");
        rightButton.className = "button right";
        let rightImg = document.createElement("img");
        rightImg.src =
          "https://harryheman.github.io/imageGallerySliderMaker/assets/right.svg";
        rightButton.appendChild(rightImg);
        buttons.appendChild(rightButton);
        rightButton.addEventListener("click", () => changeSlide("+"));

        let closeButton = document.createElement("button");
        closeButton.className = "button close";
        let closeImg = document.createElement("img");
        closeImg.src =
          "https://harryheman.github.io/imageGallerySliderMaker/assets/close.svg";
        closeButton.appendChild(closeImg);
        buttons.appendChild(closeButton);
        closeButton.addEventListener("click", () => generateSlider(figure));
      } else {
        let buttons = document.querySelector(".buttons");
        slider.removeChild(buttons);
      }
    }

    function changeSlide(e) {
      for (i = 0; i < figures.length; i++) {
        figures[i].style.opacity = 0;
      }
      if (e == "-") {
        if (figure == figures[0]) {
          figure = figures[figures.length - 1];
        } else {
          figure = figure.previousElementSibling;
        }
      } else if (e == "+") {
        if (figure == figures[figures.length - 1]) {
          figure = figures[0];
        } else {
          figure = figure.nextElementSibling;
        }
      }
      figure.style.opacity = 1;
    }

    document.addEventListener("keydown", (e) => {
      if (e.keyCode == 37 || e.keyCode == 189) {
        changeSlide("-");
      } else if (e.keyCode == 39 || e.keyCode == 187) {
        changeSlide("+");
      } else if (e.keyCode == 27) {
        generateSlider(figure);
      }
    });
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.