如何在bootstrap中创建产品滑块
如何在bootstrap中创建产品滑块，如下图所示，左侧显示大图像，缩略图滑块右上方有详细信息。
我想对以下图片进行一次修改。我希望缩略图滑块位于显示同一产品的其他图像的大图像下方，但右侧的缩略图滑块应导航到下一个产品。
我的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>
但上面的代码无效
3 个答案:
答案 0 :(得分：2)
您可以使用Bootstrap轮播，您可以在此处阅读：Bootstrap Carousel
或者您也可以使用Owl轮播，它有很多Bootstrap轮播中没有的选项。这是OWL Carousel
答案 1 :(得分：2)
答案 2 :(得分：1)
这实际上在Bootstrap中非常简单，没有任何额外的插件，甚至只有一行javascript。
这是 DEMO
这是一个与您的设计大致相符的基本布局。根据你的需要设计风格。这利用了Bootstrap数据目标和数据滑动到选项。数据目标是轮播的id，data-slide-to只是表示幻灯片的数字（基于0，因此幻灯片1设置为data-slide-to =“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%;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？