引导多个旋转木马无法处理缩略图单击

Question

我使用了3个引导模式按钮，在每个按钮上我想显示三个不同的模式，在每个模式上我试图显示三个不一样的缩略图旋转木马，但在我的代码中，它只适用于第一个模式，在第一个模式缩略图旋转木马中，单击每个缩略图时，旋转木马都会做出响应，但在第二个和第三个模式缩略图循环木马中，缩略图onclick功能不起作用，任何人都能解决我的问题吗。。请

.product-slider { padding: 45px; }
.product-slider #carousel { border: 4px solid #1089c0; margin: 0; }
.product-slider #thumbcarousel { margin: 12px 0 0; padding: 0 45px; }
.product-slider #thumbcarousel .item { text-align: center; }
.product-slider #thumbcarousel .item .thumb { border: 4px solid #cecece; width: 20%; margin: 0 2%; display: inline-block; vertical-align: middle; cursor: pointer; max-width: 98px; }
.product-slider #thumbcarousel .item .thumb:hover { border-color: #1089c0; }
.product-slider .item img { width: 100%; height: auto; }
.carousel-control { color: #0284b8; text-align: center; text-shadow: none; font-size: 30px; width: 30px; height: 30px; line-height: 20px; top: 23%; }
.carousel-control:hover, .carousel-control:focus, .carousel-control:active { color: #333; }
.carousel-caption, .carousel-control .fa { font: normal normal normal 30px/26px FontAwesome; }
.carousel-control { background-color: rgba(0, 0, 0, 0); bottom: auto; font-size: 20px; left: 0; position: absolute; top: 30%; width: auto; }
.carousel-control.right, .carousel-control.left { background-color: rgba(0, 0, 0, 0); background-image: none; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Modal 1</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Modal 2</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">Modal 3</button>
</div>  
</div>  
</div>  
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
</div>
</div>
<!-- /carousel-inner --> 
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel --> 

</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
</div>
</div>
<!-- /carousel-inner --> 
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel --> 

</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
</div>
</div>
<!-- /carousel-inner --> 
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel --> 

</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

ID必须是唯一的。给每个转盘和每个thumbcarousel一个自己的ID，你就可以出发了。使用类来设置它们的样式。

.product-slider {
padding: 45px;
}
.product-slider .carousel {
border: 4px solid #1089c0;
margin: 0;
}
.product-slider .thumbcarousel {
margin: 12px 0 0;
padding: 0 45px;
}
.product-slider .thumbcarousel .item {
text-align: center;
}
.product-slider .thumbcarousel .item .thumb {
border: 4px solid #cecece;
width: 20%;
margin: 0 2%;
display: inline-block;
vertical-align: middle;
cursor: pointer;
max-width: 98px;
}
.product-slider .thumbcarousel .item .thumb:hover {
border-color: #1089c0;
}
.product-slider .item img {
width: 100%;
height: auto;
}
.carousel-control {
color: #0284b8;
text-align: center;
text-shadow: none;
font-size: 30px;
width: 30px;
height: 30px;
line-height: 20px;
top: 23%;
}
.carousel-control:hover,
.carousel-control:focus,
.carousel-control:active {
color: #333;
}
.carousel-caption,
.carousel-control .fa {
font: normal normal normal 30px/26px FontAwesome;
}
.carousel-control {
background-color: rgba(0, 0, 0, 0);
bottom: auto;
font-size: 20px;
left: 0;
position: absolute;
top: 30%;
width: auto;
}
.carousel-control.right,
.carousel-control.left {
background-color: rgba(0, 0, 0, 0);
background-image: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Modal 1</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Modal 2</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">Modal 3</button>
</div>
</div>
</div>
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel_1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="https://picsum.photos/950/500?image=1"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=2"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=3"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=4"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=5"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=6"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=7"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=8"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=9"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=10"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel_1" class="carousel thumbcarousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel_1" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=1"></div>
<div data-target="#carousel_1" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=2"></div>
<div data-target="#carousel_1" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=3"></div>
<div data-target="#carousel_1" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=4"></div>
<div data-target="#carousel_1" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=5"></div>
</div>
<div class="item">
<div data-target="#carousel_1" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=6"></div>
<div data-target="#carousel_1" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=7"></div>
<div data-target="#carousel_1" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=8"></div>
<div data-target="#carousel_1" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=9"></div>
<div data-target="#carousel_1" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=10"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel_1" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a>
<a class="right carousel-control" href="#thumbcarousel_1" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel_2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="https://picsum.photos/950/500?image=11"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=12"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=13"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=14"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=15"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=16"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=17"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=18"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=19"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=20"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel_2" class="carousel thumbcarousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel_2" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=11"></div>
<div data-target="#carousel_2" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=12"></div>
<div data-target="#carousel_2" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=13"></div>
<div data-target="#carousel_2" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=14"></div>
<div data-target="#carousel_2" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=15"></div>
</div>
<div class="item">
<div data-target="#carousel_2" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=16"></div>
<div data-target="#carousel_2" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=17"></div>
<div data-target="#carousel_2" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=18"></div>
<div data-target="#carousel_2" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=19"></div>
<div data-target="#carousel_2" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=20"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel_2" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i> </a>
<a class="right carousel-control" href="#thumbcarousel_2" role="button" data-slide="next"><i
class="fa fa-angle-right" aria-hidden="true"></i> </a>
</div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel_3" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="https://picsum.photos/950/500?image=21"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=22"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=23"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=24"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=25"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=26"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=27"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=28"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=29"> </div>
<div class="item"> <img src="https://picsum.photos/950/500?image=30"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel_3" class="carousel thumbcarousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel_3" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=21"></div>
<div data-target="#carousel_3" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=22"></div>
<div data-target="#carousel_3" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=23"></div>
<div data-target="#carousel_3" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=24"></div>
<div data-target="#carousel_3" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=25"></div>
</div>
<div class="item">
<div data-target="#carousel_3" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=26"></div>
<div data-target="#carousel_3" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=27"></div>
<div data-target="#carousel_3" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=28"></div>
<div data-target="#carousel_3" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=29"></div>
<div data-target="#carousel_3" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=30"></div>
</div>
</div>
<!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel_3" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i> </a>
<a class="right carousel-control" href="#thumbcarousel_3" role="button" data-slide="next"><i
class="fa fa-angle-right" aria-hidden="true"></i> </a>
</div>
<!-- /thumbcarousel -->
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

这是重复id的问题。所有转盘都有id="carousel"。让它独一无二，

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Modal 1</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Modal 2</button>
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">Modal 3</button>
</div>  
</div>  
</div>  
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
<div data-target="#carousel" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/sunset.jpg"></div>
</div>
</div>
<!-- /carousel-inner --> 
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel --> 
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel2" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel2" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
<div data-target="#carousel2" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/lake.jpg"></div>
</div>
</div>
<!-- /carousel-inner --> 
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel --> 
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal3" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="product-slider">
<div id="carousel3" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
<div class="item"> <img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"> </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel3" data-slide-to="0" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="1" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="2" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="3" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="4" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
</div>
<div class="item">
<div data-target="#carousel3" data-slide-to="5" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="6" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="7" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="8" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
<div data-target="#carousel3" data-slide-to="9" class="thumb"><img src="http://wowslider.com/sliders/demo-93/data1/images/landscape.jpg"></div>
</div>
</div>
<!-- /carousel-inner --> 
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div>
<!-- /thumbcarousel --> 
</div>
</div>
</div>
</div>
</div>
</div>