How to change a div's background image by clicking another image or div?

Can anyone help me to code this? I wanted to switch the big picture with the right-side of the current picture when I click on the right arrow. Same goes for the left arrow. I am using background image because of the resolution I want to use for the big picture. I have tried using JS and CSS from YouTube tutorials, but nothing worked so far.

I prefer with JavaScript, but CSS is fine for me.

Here is the code I use for HTML.

<div class="right_arr"><img src="/right-arrow.png" alt="" style="width: 30.17px; height: 30px;"></div>
  <div class="left_arr"><img src="/right-arrow.png" alt="" style="width: 30.17px; height: 30px;"></div>

  <div class="foto_1" id="foto_1"></div>
    <div class="small1" style="background-image: url(/ansmet\ item\ 2.jpg);"></div>
    <div class="small2" style="background-image: url(/facebook.png);"></div>
    <div class="small3" style="background-image: url(/apple.png);"></div>
    <div class="small4" style="background-image: url(/shopping-cart.png);"></div>
  </div>

CSS

.foto_1{
    position: absolute;

    width: 437px;
    height: 484.5px;
    background:pink; /* just for demo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    left: 65px;
    top: 107px;

    transition: transform .2s;
    border-radius: 2px;

    background-image: url("/ansmet\ item\ 2.jpg");
  }

.small1{
  box-sizing: border-box;

  background:pink; /* just for demo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: absolute;
  width: 99px;
  height: 120px;
  left: 65px;
  top: 613px;

  border: 1px solid #000000;
  border-radius: 2px;
}

.small2{
    box-sizing: border-box;

    background:pink; /* just for demo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    width: 99px;
    height: 120px;
    left: 180px;
    top: 613px;

    border-radius: 2px;
}

.small3{
    box-sizing: border-box;

    background:pink; /* just for demo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    width: 99px;
    height: 120px;
    left: 295px;
    top: 613px;

    border-radius: 2px;
}

.small4{
    box-sizing: border-box;

    background:pink; /* just for demo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    width: 99px;
    height: 120px;
    left: 410px;
    top: 613px;

    border-radius: 2px;
}

.right_arr{
    position: absolute;
    width: 30.17px;
    height: 30px;
    left: 517px;
    top: 338.17px;

    cursor: pointer;
}

.left_arr{
    position: absolute;
    width: 30.17px;
    height: 30px;
    left: 20px;
    top: 338.17px;

    cursor: pointer;
    transform: rotate(-180deg);
}

>Solution :

To switch the big picture with the right-side of the current picture when clicking on the right arrow, and vice versa for the left arrow, you can use JavaScript to manipulate the CSS background-image property. Here’s an example of how you can achieve this:

HTML:

<div class="right_arr" onclick="navigate('right')"><img src="/right-arrow.png" alt="" style="width: 30.17px; height: 30px;"></div>
<div class="left_arr" onclick="navigate('left')"><img src="/left-arrow.png" alt="" style="width: 30.17px; height: 30px;"></div>

<div class="foto_1" id="foto_1"></div>
<div class="small1" onclick="changeImage('/ansmet item 2.jpg')"></div>
<div class="small2" onclick="changeImage('/facebook.png')"></div>
<div class="small3" onclick="changeImage('/apple.png')"></div>
<div class="small4" onclick="changeImage('/shopping-cart.png')"></div>

.foto_1 {
  position: absolute;
  width: 437px;
  height: 484.5px;
  background: pink;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  left: 65px;
  top: 107px;
  transition: transform .2s;
  border-radius: 2px;
}

.small1, .small2, .small3, .small4 {
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  width: 99px;
  height: 120px;
  border: 1px solid #000000;
  border-radius: 2px;
}

.small1 {
  left: 65px;
  top: 613px;
}

.small2 {
  left: 180px;
  top: 613px;
}

.small3 {
  left: 295px;
  top: 613px;
}

.small4 {
  left: 410px;
  top: 613px;
}

.right_arr, .left_arr {
  position: absolute;
  width: 30.17px;
  height: 30px;
  cursor: pointer;
}

.right_arr {
  left: 517px;
  top: 338.17px;
}

.left_arr {
  left: 20px;
  top: 338.17px;
  transform: rotate(-180deg);
}

let currentIndex = 0;
const imageUrls = [
  '/ansmet item 2.jpg',
  '/facebook.png',
  '/apple.png',
  '/shopping-cart.png'
];

function changeImage(imageUrl) {
  const foto1 = document.getElementById('foto_1');
  foto1.style.backgroundImage = `url(${imageUrl})`;
  currentIndex = imageUrls.indexOf(imageUrl);
}

function navigate(direction) {
  if (direction === 'right') {
    currentIndex = (currentIndex + 1) % imageUrls.length;
  } else if (direction === 'left') {
    currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;
  }

  const imageUrl = imageUrls[currentIndex];
  const foto1 = document.getElementById('foto_1');
  foto1.style.backgroundImage = `url(${imageUrl})`;
}

In this code, the JavaScript functions changeImage and navigate are used to handle the image changes. The changeImage function updates the background-image property of the big picture (foto_1) and keeps track of the current image index. The navigate function is called when clicking on the arrow buttons and updates the current index accordingly, then changes the background image accordingly.

Make sure to link the CSS file (style.css) and include the JavaScript code either in a tag in the HTML file or in an external JavaScript file linked to the HTML.