引导程序，多个项目，轮播问题以及多个轮播上的下一个和上一个按钮

如何解决引导程序，多个项目，轮播问题以及多个轮播上的下一个和上一个按钮

我有2个独立的模态和多个项，每个模态中都有Bootstrap传送带，它们都使用项上的动态选项卡来显示选项卡窗格。我目前有一个（第一个）轮播工作正常，但似乎无法让下一个和上一个按钮在第二个轮播上工作。样式看起来不错，但是下一个和上一个按钮根本不会触发。我尝试了不同的方法，但似乎找不到合适的方法。非常感谢您提供任何帮助，谢谢！

JavaScript，CSS，HTML：

/*
Carousel1
*/
$('#carousel-customDeskHome').on('slide.bs.carousel',function (e) {

    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 5;
    var totalItems = $('.carousel-item1').length;

    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item1').eq(i).appendTo('.carousel-inner1');
            }
            else {
                $('.carousel-item1').eq(0).appendTo('.carousel-inner1');
            }
        }
    }
});
/*
Carousel2
*/
$('#carousel-woodworkingExample1').on('slide.bs.carousel',function (e) {

    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 5;
    var totalItems = $('.carousel-item2').length;

    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item2').eq(i).appendTo('.carousel-inner2');
            }
            else {
                $('.carousel-item2').eq(0).appendTo('.carousel-inner2');
            }
        }
    }
});

#customDeskHome,#woodworkingExample1 .close {
  margin-left: 0;
}

.modal-gallery img {
  height: 125px;
}


@media (min-width: 768px) and (max-width: 991px) {
  /* Show 4th slide on md if col-md-4*/
  .carousel-inner .active.col-md-4.carousel-item+.carousel-item+.carousel-item+.carousel-item,.carousel-inner2 .active.col-md-4.carousel-item2+.carousel-item2+.carousel-item2+.carousel-item2 {
    position: absolute;
    top: 0;
    right: -33.3333%;
    /*change this with javascript in the future*/
    z-index: -1;
    display: block;
    visibility: visible;
  }
}

@media (min-width: 576px) and (max-width: 768px) {
  /* Show 3rd slide on sm if col-sm-6*/
  .carousel-inner .active.col-sm-6.carousel-item+.carousel-item+.carousel-item,.carousel-inner2 .active.col-sm-6.carousel-item2+.carousel-item2+.carousel-item2 {
    position: absolute;
    top: 0;
    right: -50%;
    /*change this with javascript in the future*/
    z-index: -1;
    display: block;
    visibility: visible;
  }
}

@media (min-width: 576px) {
  .carousel-item,carousel-item2 {
    margin-right: 0;
  }
  /* show 2 items */
  .carousel-inner .active+.carousel-item,.carousel-inner2 .active+.carousel-item2 {
    display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),.carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left),.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,.carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left)+.carousel-item2 {
    transition: none;
  }
  .carousel-inner .carousel-item-next,.carousel-inner2 .carousel-item2-next {
    position: relative;
    transform: translate3d(0,0);
  }
  /* left or forward direction */
  .active.carousel-item-left+.carousel-item-next.carousel-item-left,.active.carousel-item2-left+.carousel-item2-next.carousel-item2-left,.carousel-item-next.carousel-item-left+.carousel-item,.carousel-item2-next.carousel-item2-left+.carousel-item2,.carousel-item-next.carousel-item-left+.carousel-item+.carousel-item,.carousel-item2-next.carousel-item2-left+.carousel-item2+.carousel-item2 {
    position: relative;
    transform: translate3d(-100%,0);
    visibility: visible;
  }
  /* farthest right hidden item must be also positioned for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right,.carousel-inner2 .carousel-item2-prev.carousel-item2-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }
  /* right or prev direction */
  .active.carousel-item-right+.carousel-item-prev.carousel-item-right,.active.carousel-item2-right+.carousel-item2-prev.carousel-item2-right,.carousel-item-prev.carousel-item-right+.carousel-item,.carousel-item2-prev.carousel-item2-right+.carousel-item2,.carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item,.carousel-item2-prev.carousel-item2-right+.carousel-item2+.carousel-item2 {
    position: relative;
    transform: translate3d(100%,0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}


/* MD */

@media (min-width: 768px) {
  /* show 3rd of 3 item slide */
  .carousel-inner .active+.carousel-item+.carousel-item,.carousel-inner2 .active+.carousel-item2+.carousel-item2 {
    display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item,.carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left)+.carousel-item2+.carousel-item2 {
    transition: none;
  }
  .carousel-inner .carousel-item-next,0);
  }
  /* left or forward direction */
  .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item,.carousel-item2-next.carousel-item2-left+.carousel-item2+.carousel-item2+.carousel-item2 {
    position: relative;
    transform: translate3d(-100%,0);
    visibility: visible;
  }
  /* right or prev direction */
  .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item,.carousel-item2-prev.carousel-item2-right+.carousel-item2+.carousel-item2+.carousel-item2 {
    position: relative;
    transform: translate3d(100%,0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}


/* LG */

@media (min-width: 991px) {
  /* show 4th item */
  .carousel-inner .active+.carousel-item+.carousel-item+.carousel-item,.carousel-inner2 .active+.carousel-item2+.carousel-item2+.carousel-item2 {
    display: block;
  }
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item+.carousel-item,.carousel-inner2 .carousel-item2.active:not(.carousel-item2-right):not(.carousel-item2-left)+.carousel-item2+.carousel-item2+.carousel-item2 {
    transition: none;
  }
  /* Show 5th slide on lg if col-lg-3 */
  .carousel-inner .active.col-lg-3.carousel-item+.carousel-item+.carousel-item+.carousel-item+.carousel-item,.carousel-inner2 .active.col-lg-3.carousel-item2+.carousel-item2+.carousel-item2+.carousel-item2+.carousel-item2 {
    position: absolute;
    top: 0;
    right: -25%;
    /*change this with javascript in the future*/
    z-index: -1;
    display: block;
    visibility: visible;
  }
  /* left or forward direction */
  .carousel-item-next.carousel-item-left+.carousel-item+.carousel-item+.carousel-item+.carousel-item,.carousel-item2-next.carousel-item2-left+.carousel-item2+.carousel-item2+.carousel-item2+.carousel-item2 {
    position: relative;
    transform: translate3d(-100%,0);
    visibility: visible;
  }
  /* right or prev direction //t - prevIoUs slide direction last item animation fix */
  .carousel-item-prev.carousel-item-right+.carousel-item+.carousel-item+.carousel-item+.carousel-item,.carousel-item2-prev.carousel-item2-right+.carousel-item2+.carousel-item2+.carousel-item2+.carousel-item2 {
    position: relative;
    transform: translate3d(100%,0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!--just the carousel code-->
<div class="modal-gallery">
  <div class="container-fluid">
    <div id="carousel-customDeskHome" class="carousel slide" data-ride="carousel">
      <ul class="carousel-inner carousel-inner1 row nav nav-tabs w-100 mx-auto" role="listBox">
        <li class="carousel-item carousel-item1 nav-item col-12 col-sm-6 col-md-4 col-lg-3 active">
          <a class="nav-link active" data-toggle="tab" href="#home">
            <img src="images/global1.jpg" class="img-fluid mx-auto d-block" alt="img1" />
          </a>
        </li>
        <li class="carousel-item carousel-item1 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu1">
            <img src="images/global2.jpg" class="img-fluid mx-auto d-block" alt="img2" />
          </a>
        </li>
        <li class="carousel-item carousel-item1 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu2">
            <img src="images/global3.jpg" class="img-fluid mx-auto d-block" alt="img3" />
          </a>
        </li>
        <li class="carousel-item carousel-item1 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu3">
            <img src="images/global4.jpg" class="img-fluid mx-auto d-block" alt="img4" />
          </a>
        </li>
        <li class="carousel-item carousel-item1 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu4">
            <img src="images/global5.jpg" class="img-fluid mx-auto d-block" alt="img5" />
          </a>
        </li>
        <li class="carousel-item carousel-item1 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu5">
            <img src="images/global6.jpg" class="img-fluid mx-auto d-block" alt="img6" />
          </a>
        </li>
        <li class="carousel-item carousel-item1 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu6">
            <img src="images/global7.jpg" class="img-fluid mx-auto d-block" alt="img7" />
          </a>
        </li>
        <li class="carousel-item carousel-item1 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu7">
            <img src="images/global8.jpg" class="img-fluid mx-auto d-block" alt="img8" />
          </a>
        </li>
      </ul>
      <a class="carousel-control-prev" href="#carousel-customDeskHome" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">PrevIoUs</span>
      </a>
      <a class="carousel-control-next" href="#carousel-customDeskHome" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>
<!--code for second carousel-->
<div class="modal-gallery">
  <div class="container-fluid">
    <div id="carousel-woodworkingExample1" class="carousel slide" data-ride="carousel">
      <ul class="carousel-inner carousel-inner2 row nav nav-tabs w-100 mx-auto" role="listBox">
        <li class="carousel-item2 nav-item col-12 col-sm-6 col-md-4 col-lg-3 active">
          <a class="nav-link active" data-toggle="tab" href="#home-2">
            <img src="images/global1.jpg" class="img-fluid mx-auto d-block" alt="img1" />
          </a>
        </li>
        <li class="carousel-item carousel-item2 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu1-2">
            <img src="images/global2.jpg" class="img-fluid mx-auto d-block" alt="img2" />
          </a>
        </li>
        <li class="carousel-item carousel-item2 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu2-2">
            <img src="images/global3.jpg" class="img-fluid mx-auto d-block" alt="img3" />
          </a>
        </li>
        <li class="carousel-item carousel-item2 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu3-2">
            <img src="images/global4.jpg" class="img-fluid mx-auto d-block" alt="img4" />
          </a>
        </li>
        <li class="carousel-item carousel-item2 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu4-2">
            <img src="images/global5.jpg" class="img-fluid mx-auto d-block" alt="img5" />
          </a>
        </li>
        <li class="carousel-item carousel-item2 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu5-2">
            <img src="images/global6.jpg" class="img-fluid mx-auto d-block" alt="img6" />
          </a>
        </li>
        <li class="carousel-item carousel-item2 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu6-2">
            <img src="images/global7.jpg" class="img-fluid mx-auto d-block" alt="img7" />
          </a>
        </li>
        <li class="carousel-item carousel-item2 col-12 col-sm-6 col-md-4 col-lg-3">
          <a class="nav-link" data-toggle="tab" href="#menu7-2">
            <img src="images/global8.jpg" class="img-fluid mx-auto d-block" alt="img8" />
          </a>
        </li>
      </ul>
      <a class="carousel-control-prev" href="#carousel-woodworkingExample1" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">PrevIoUs</span>
      </a>
      <a class="carousel-control-next" href="#carousel-woodworkingExample1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>