使两个轮播同时使用相同的下一步和上一步箭头按钮

<div class="carousel-container">
  <div class="carousel-item">轮播项1</div>
  <div class="carousel-item">轮播项2</div>
  <div class="carousel-item">轮播项3</div>
</div>

<div class="carousel-container">
  <div class="carousel-item">轮播项1</div>
  <div class="carousel-item">轮播项2</div>
  <div class="carousel-item">轮播项3</div>
</div>

<button id="prevBtn">上一步</button>
<button id="nextBtn">下一步</button>

.carousel-container {
  width: 300px;
  height: 200px;
  background-color: #f2f2f2;
}

.carousel-item {
  width: 100%;
  height: 100%;
  display: none;
}

.carousel-item:first-child {
  display: block;
}

var carouselContainers = document.querySelectorAll('.carousel-container');
var prevBtn = document.getElementById('prevBtn');
var nextBtn = document.getElementById('nextBtn');

prevBtn.addEventListener('click', function() {
  changeCarousel(-1);
});

nextBtn.addEventListener('click', function() {
  changeCarousel(1);
});

function changeCarousel(direction) {
  carouselContainers.forEach(function(container) {
    var items = container.querySelectorAll('.carousel-item');
    var currentIndex = 0;

    for (var i = 0; i < items.length; i++) {
      if (items[i].style.display === 'block') {
        currentIndex = i;
        break;
      }
    }

    items[currentIndex].style.display = 'none';

    if (direction === -1) {
      currentIndex = (currentIndex - 1 + items.length) % items.length;
    } else {
      currentIndex = (currentIndex + 1) % items.length;
    }

    items[currentIndex].style.display = 'block';
  });
}