[Javascript] Slideshow Gallery

[ANDREA20]

Buogiorno io devo creare una galleria cosi ma il problema che i tasti si sovrapporranno non riesco ad risolvere il problema qualcuno mi può aiutare gentilmente grazie

<div class="row">
  <div class="column">
    <div class="content">
            <img class="airpods" src="images/accessori/apple/airpods/1airpods_partholonsrl.jpeg" style="width:100%">
            <img class="airpods" src="images/accessori/apple/airpods/2airpods_partholonsrl.jpeg" style="width:100%">
            <img class="airpods" src="images/accessori/apple/airpods/3airpods_partholonsrl.jpeg" style="width:100%">
            <img class="airpods" src="images/accessori/apple/airpods/4airpods_partholonsrl.jpeg" style="width:100%">
          <img class="airpods" src="images/accessori/apple/airpods/5airpods_partholonsrl.jpeg" style="width:100%">
          <img class="airpods" src="images/accessori/apple/airpods/6airpods_partholonsrl.jpeg" style="width:100%">
      <h3>AirPods</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset
                eos no. Temporibus necessitatibus sea ei, at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
                <button class="button" onclick="airpods(-1)">&#10094;</button>
            <button class="button" onclick="airpods(1)">&#10095;</button>
    </div>
  </div>
  <div class="column">
    <div class="content">
            <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/1auricolari_partholonsrl.jpeg" style="width:100%">
            <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/2auricolari_partholonsrl.jpeg" style="width:100%">
            <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/3auricolari_partholonsrl.jpeg" style="width:100%">
            <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/4auricolari_partholonsrl.jpeg" style="width:100%">
         <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/5auricolari_partholonsrl.jpeg" style="width:100%">
         <img class="cuffie" src="images/accessori/apple/auricolariearpodsconconnettorelightning/6auricolari_partholonsrl.jpeg" style="width:100%">
      <h3>My Work</h3>
      <p>Lorem ipsum dolor sit amet, tempor prodesset eos no. Temporibus necessitatibus sea ei,
                at tantas oporteat nam. Lorem ipsum dolor sit amet, tempor prodesset eos no.</p>
                <button class="button" onclick="cuffie(-1)">&#10094;</button>
                <button class="button" onclick="cuffie(1)">&#10095;</button>
    </div>
  </div>


<!-- END MAIN -->
</div>


<br>
<script>
var slideIndex = 1;
airpods(airpods);

function airpods(n) {
  airpods(slideIndex += n);
}

function airpods(n) {
  var i;
  var x = document.getElementsByClassName("airpods");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function cuffie(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("cuffie");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
</script>