带有带引导程序v4的缩略图的轮播 [英] carousel with thumbnails with bootstrap v4
本文介绍了带有带引导程序v4的缩略图的轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在bootstrap 3 此处中看到了带有缩略图的轮播演示.
I saw a demo of carousel with thumbnails with bootstrap 3 here.
我正在尝试对Bootstrap v4实施相同的操作，但无法弄清楚如何修复UI的某些细节，例如左/右阴影超过整个高度(包括缩略图). 此处是v4的提琴.
I am trying to implement the same for bootstrap v4, but could not figure out how to fix some of UI nitty gritty like left/right shadow coming over whole height including thumbnails as well. Here is the fiddle with v4.
以下是HTML代码:
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
</div>
<!-- Controls -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li data-target='#carousel-custom' data-slide-to='0' class='active'><img
src='http://placehold.it/100x50&text=slide1' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' />
</li>
<li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' />
</li>
</ol>
</div>
CSS更改:
#carousel-example-generic {
margin: 20px auto;
width: 400px;
}
#carousel-custom {
margin: 20px auto;
width: 400px;
}
#carousel-custom .carousel-indicators {
margin: 10px 0 0;
overflow: auto;
position: static;
text-align: left;
white-space: nowrap;
width: 100%;
}
#carousel-custom .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel-custom .carousel-indicators li img {
display: block;
opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
opacity: 0.75;
}
推荐答案
对于Bootstrap 4，将list-inline用于滑块缩略图可能会更容易，并且您不需要太多的CSS.
For Bootstrap 4 it may be easier to use list-inline for the slider thumbnails and you won't need as much extra CSS.
<div class="col-lg-6 offset-lg-3" id="slider">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item carousel-item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-fluid">
</div>
<a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<ul class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=one" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=two" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=three" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=four" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=five" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=six" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=seven" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=eight" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
https://codeply.com/go/tBbcVXe1xZ
这篇关于带有带引导程序v4的缩略图的轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
