如何在自举程序中创建产品滑块，如下面的图片所示，该图片在左侧显示大图像，在缩略图滑块上方在右侧显示详细信息。
我想要对下一张图片进行修改。我想在大图像下方显示缩略图滑块，以显示相同产品的其他图像，但右侧的缩略图滑块应导航至下一个产品。
我的html代码
<div class="pull"></div>
<div class="container">
<div class="content">
<div class ="row">
<li id="product">
<div class="pad">
<div class ="col-xs-12 col-md-6">
<div class="col1">
<div class="gallery_big_img">
<img src="images/doubleRound/all parts.JPG" alt="" class="img1" id="active">
<img src="images/doubleRound/bottom.JPG" alt="" class="img2">
<img src="images/doubleRound/front_side.JPG" alt="" class="img3">
<img src="images/doubleRound/front.JPG" alt="" class="img4">
<img src="images/doubleRound/top.JPG" alt="" class="img5">
<img src="images/singleRound/all parts.JPG" alt="" class="img6">
<img src="images/singleRound/down.JPG" alt="" class="img7">
<img src="images/singleRound/front.JPG" alt="" class="img8">
<img src="images/singleRound/front_side.JPG" alt="" class="img9">
<img src="images/singleRound/top_back.JPG" alt="" class="img10">
</div>
</div>
<div class ="col-md-12 col-md-6">
<div class="col1 pad_left1">
<h2>Products</h2>
<div id="caption">
<ul>
<li class="img1">
<p class="pad_bot1"><strong>Double Shape All Parts</strong><br>
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Danctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img2">
<p class="pad_bot1"><strong>Double Round Bottom</strong><br>
Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img3">
<p class="pad_bot1"><strong>Double Round Front Side</strong><br>
Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img4">
<p class="pad_bot1"><strong>Double Round Front</strong><br>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Ipsum dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img5">
<p class="pad_bot1"><strong>Double Round Top</strong><br>
Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img6">
<p class="pad_bot1"><strong>Signle Round All Parts</strong><br>
Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img7">
<p class="pad_bot1"><strong>Signle Round Down</strong><br>
Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img8">
<p class="pad_bot1"><strong>Signle Round Front</strong><br>
Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img9">
<p class="pad_bot1"><strong>Signle Round Front Side</strong><br>
Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
<li class="img10">
<p class="pad_bot1"><strong>Signle Round Top Back</strong><br>
Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum tet clita kasd gubergren, no sea takimata.</p>
<p>Dolor sit amet. Lorem ipsum dolor sit tempor invidunt ut labore.</p>
</li>
</ul>
</div>
<div class="relative">
<div id="gallery1" class="small_img">
<ul>
<li><a href="#img1"><img src="images/doubleRound/all parts.JPG" alt=""></a></li>
<li><a href="#img2"><img src="images/doubleRound/bottom.JPG" alt=""></a></li>
<li><a href="#img3"><img src="images/doubleRound/front_side.JPG" alt=""></a></li>
<li><a href="#img4"><img src="images/doubleRound/front.JPG" alt=""></a></li>
<li><a href="#img5"><img src="images/doubleRound/top.JPG" alt=""></a></li>
<li><a href="#img6"><img src="images/singleRound/all parts.JPG" alt=""></a></li>
<li><a href="#img7"><img src="images/singleRound/down.JPG" alt=""></a></li>
<li><a href="#img8"><img src="images/singleRound/front.JPG" alt=""></a></li>
<li><a href="#img9"><img src="images/singleRound/front_side.JPG" alt=""></a></li>
<li><a href="#img10"><img src="images/singleRound/top_back.JPG" alt=""></a></li>
</ul>
</div>
<a href="#" class="prev"><span></span></a>
<a href="#" class="next"><span></span></a>
</div>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
但是上面的代码不起作用
最佳答案
实际上，这在Bootstrap中非常简单，无需任何额外的插件，甚至无需一行JavaScript。
这是DEMO
这是与您的设计大致匹配的基本布局。随心所欲地设置样式。这利用了Bootstrap的data-target和data-slide-to选项。数据目标是轮播的ID，数据幻灯片到只是代表幻灯片的数字（基于0，因此幻灯片1设置为数据幻灯片到“ 0”）。
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/350x250/e8117f/fff&text=Product+Main">
</div>
<div class="item">
<img src="http://placehold.it/350x250/00ffff/000&text=Product+Image+2">
</div>
<div class="item">
<img src="http://placehold.it/350x250/ff00ff/fff&text=Product+Image+3">
</div>
<div class="item">
<img src="http://placehold.it/350x250/ffff00/000&text=Product+Image+4">
</div>
</div>
<div class="clearfix">
<div class="carousel-link">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+3"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100/ffff00/000&text=Product+Image+4"></div>
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
<div class="col-sm-6">
<h2>Products</h2>
<h3>Some product subhead</h3>
<p>Product description goes here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div> <!-- /col-sm-6 -->
</div> <!-- /row -->
</div> <!-- /container -->
这是用于切换轮播的缩略图的一些其他样式。
.carousel-link .thumb {
width: 25%;
cursor: pointer;
float: left;
}
.carousel-link .thumb img {
width: 100%;
padding: 2px;
}
.carousel-link .thumb:first-of-type img {
padding-left: 0;
}
.carousel-link .thumb:last-of-type img {
padding-right: 0;
}
.item img {
width: 100%;
}
关于jquery - 如何在 bootstrap 中创建产品滑块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24349644/