2 Carousel Sliders on 1 Page Not Working

Still a newbie in JS and stuck in a small slider issue. I have 2 simple carousel sliders on one page, but only one of them works. If I disable the second, the first one works properly, but not both at the same time.

I suspect it has to do with my Javascript code, but cannot figure out what to change:

JS (Above) and HTLM (Below):

// - - - - - BANNER SLIDER

<script>
  var slideIndex = 0;
  carousel();

  function carousel() {
    var i;
    var x = document.getElementsByClassName("bg-image-slide");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {
      slideIndex = 1
    }
    x[slideIndex - 1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
  }
</script>



// - - - - - TESTIMONIAL SLIDER

<script>

  var slideIndex = 0;
  carousel();

  function carousel() {
    var i;
    var x = document.getElementsByClassName("testimonial");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {
      slideIndex = 1
    }
    x[slideIndex - 1].style.display = "block";
    setTimeout(carousel, 6500);
  }

</script>

<!-- BANNER SLIDER  -->
<div class="banner-slider">
<div class="bg-image-slide bg-slide-1"></div>
<div class="bg-image-slide bg-slide-2"></div>
<div class="bg-image-slide bg-slide-3"></div>
</div>


<!-- TESTIMONIAL SLIDER  -->

  <div id="testimonial-slider">
    <div class="testimonial">
      <p class="testimonial-review"> {{site.data.testimonials.review-1-en}} </p>
      <h4 class="testimonial-client"> {{site.data.testimonials.name-1-en}} </h4>
      <h5 class="testimonial-country">{{site.data.testimonials.country-1-en}}</h5>
    </div>
    <div class="testimonial">
      <p class="testimonial-review"> {{site.data.testimonials.review-2-en}} </p>
      <h4 class="testimonial-client"> {{site.data.testimonials.name-2-en}} </h4>
      <h5 class="testimonial-country">{{site.data.testimonials.country-2-en}}</h5>

    </div>
    <div class="testimonial">
      <p class="testimonial-review"> {{site.data.testimonials.review-3-en}} </p>
      <h4 class="testimonial-client"> {{site.data.testimonials.name-3-en}} </h4>
      <h5 class="testimonial-country">{{site.data.testimonials.country-3-en}}</h5>
    </div>
  </div>

Solution

For the second carousel, you have to make different function, and a different slideIndex variable.

For first carousel I used carousel function and slideIndex.

For second carousel I used carousel1 function and slideIndex1.

.display-container{
margin:20px;
border: 1px solid;
}

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="display-container">
  <div class="mySlides1" style="width:100%">Slide 1 </div>
  <div class="mySlides1" style="width:100%">Slide 2</div>
</div>
<br><br>
<div class="display-container">
  <div class="mySlides2" style="width:100%">Slide 3 </div>
  <div class="mySlides2" style="width:100%">Slide 4</div>
</div>
<script>
var slideIndex = 1;
var slideIndex1 = 1;

carousel();
carousel1();

function carousel() {
  var i;
    var x = document.getElementsByClassName("mySlides1");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {
      slideIndex = 1
    }
    x[slideIndex - 1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
  }
  
  function carousel1() {
  var i;
    var x = document.getElementsByClassName("mySlides2");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex1++;
    if (slideIndex1 > x.length) {
      slideIndex1 = 1
    }
    x[slideIndex1 - 1].style.display = "block";
    setTimeout(carousel1, 2000); // Change image every 2 seconds
  }

</script>

</body>
</html>