问题描述
我有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>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）