我正在使用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">×</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">×</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">×</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>
答案 0 :(得分：2)
ID必须唯一。给每个 carousel 和每个 thumbcarousel 一个自己的ID，就可以了。使用类来设置样式。
//usage
let user,userErr;
user = await getUserFromDb(userId).catch(err=>userErr = err);
if(!user){
console.log(userErr);
}
.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;
}
答案 1 :(得分：0)
这是重复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">×</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">×</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">×</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>