JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="img-container" style="--src: https://picsum.photos/500">
    <!-- here it will be a image -->
  </div>

  <div id="btn-container">
    <button title="previus" onclick="prev();">⬅️</button>
    <button title="next" onclick="next()">➡️</button>
  </div>
</div>

<!-- just change the array :) -->
<script>
  /* here put all your img urls */
  let imgArray = [
    "https://i.stack.imgur.com/ZtQFV.jpg", /* 0 */
    "https://i.stack.imgur.com/1zsuD.jpg", /* 1 */
    "https://i.stack.imgur.com/gONSm.jpg", /* 2 */
    "https://i.stack.imgur.com/pmIwb.jpg", /* 3 */
    "https://i.stack.imgur.com/7qow3.jpg", /* 4 */
    "https://i.stack.imgur.com/JPr4x.jpg", /* ... until 50+ */
  ];
</script>

<!-- make sure to import the script at the end, or after the array in html -->
<script src="script.js"></script>

CSS

/* the most important part is here, the other also only css designs */

#container #img-container {
  /* src get changed automatically by javascript */
  background-image: var(--src);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0.5rem;
}

* {
  box-sizing: border-box;
}

body {
  /* centering vertically and horizontally */
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}


/* container responsive */

#container {
  width: 80vmin;
  height: 80vmin;
}

#container {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ccc;
}

#container {
  /* make image bigger, buttons smaller */
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
}


/* button flexbox */

#btn-container {
  display: flex;
  gap: 1rem;
}


/* buttons responsive width  */

#btn-container button {
  flex: 1;
}

JavaScript

/* get img container */
let img = document.querySelector("#img-container");

/* get id from url */
/* if the user see the website for first time reset to 0 */
let id = getId();
changeImg();

/* button functionalities */
function next() {
  id++;
  window.location.search = `id=${id}`;
}

function prev() {
  id--;
  window.location.search = `id=${id}`;
}

/* id functionalities */
function getId() {
  let result = []; // []
  let stringArray = location.search.replace("?", "").split("&"); // ["id=number", "another=string"]

  stringArray.forEach((string) => {
    result.push(string.split("="));
  }); // [[id, number], [other, string], [another, string]

  result = Object.fromEntries(result); // {id: number, another: string}

  return result.id ?? 0; // number (or 0 if undefined)
}

function resetId() {
  window.location.search = `id=0`;
}

/* change image functionalities */
function changeImg() {
  /* if the user see all image, then we reset the id to 0 */
  let choosedImg = imgArray[id] ? imgArray[id] : resetId();

  /* changing a css variable */
  img.style.setProperty("--src", `url(${choosedImg})`);
}