Html 引导多个旋转木马不处理缩略图单击

我使用3个引导模式按钮，在每个按钮上我想显示三个不同的模式，在每个模式上我试图显示三个不同的缩略图旋转木马，但在我的代码中，它只适用于第一个模式，在第一个模式缩略图旋转木马中，单击旋转木马响应的每个缩略图，但是在第二和第三模式缩略图旋转木马中，缩略图onclick功能不起作用，有人能解决我的问题吗..请

.product滑块{padding:45px；}
.product slider#carousel{边框：4px实心#1089c0；边距：0；}
.product滑块#拇指转盘{边距：12px 0；填充：0 45px；}
.product slider#thumbcarousel.item{文本对齐：居中；}
.product slider#thumbcarousel.item.thumb{边框：4px实心#cececece；宽度：20%；边距：0.2%；显示：内联块；垂直对齐：中间；光标：指针；最大宽度：98px；}
.product slider#thumbcarousel.item.thumb:悬停{边框颜色：#1089c0；}
.产品滑块.项目img{宽度：100%；高度：自动；}
.carousel控件{color:0284b8；文本对齐：居中；文本阴影：无；字体大小：30px；宽度：30px；高度：30px；线条高度：20px；顶部：23%；}
.carousel控件：悬停，.carousel控件：焦点，.carousel控件：活动{color:#333；}
.carousel caption、.carousel control.fa{font:normal 30px/26px FontAwesome；}
.carousel控件{背景颜色：rgba（0,0,0,0）；底部：自动；字体大小：20px；左侧：0；位置：绝对；顶部：30%；宽度：自动；}
.carousel-control.right、.carousel-control.left{背景颜色：rgba（0,0,0,0）；背景图像：无；}

模式1
模式2
模式3
&时代；
模态头
&时代；
模态头
&时代；
模态头

这是重复ID的问题。所有旋转木马都有id=“旋转木马”。让它像这样独一无二

    <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>

模式1
模式2
模式3
&时代；
模态头
&时代；
模态头
&时代；
模态头