如何在引导轮播下使缩略图可滚动？
Posted
技术标签:
【中文标题】如何在引导轮播下使缩略图可滚动？【英文标题】：How to make thumbnails scrollable under a bootstrap carousel? 【发布时间】：2020-06-20 05:36:44 【问题描述】：我正在尝试将Bootstrap 4.4 carousel 中的指示符从破折号更改为幻灯片下方的缩略图。我还希望能够单独滚动/滑动缩略图，以使用户能够浏览所有缩略图。
我能够将指示符从破折号更改为缩略图。但是，我遇到了以下挑战
问题 1： 左箭头（红色）和右箭头（绿色）与我的缩略图容器重叠，这使得箭头不在滑块中垂直居中，而是在整个轮播中垂直居中。 问题 2： 我需要将最底部的 Previous 和 Next 链接更改为左侧的箭头形状和右侧的另一个箭头由于上述问题 1 而滚动缩略图。如何解决以上 2 个问题？
这是我的代码，也可以在以下fiddle找到
window.addEventListener('load', function ()
var button = document.getElementById('slideBack1');
var container = document.getElementById('carousel_indicators');
button.addEventListener("click", function (event)
event.preventDefault();
sideScroll(container, 'right', 25, 100, 10);
);
var back = document.getElementById('slideNext1');
back.addEventListener("click", function (event)
event.preventDefault();
sideScroll(container, 'left', 25, 100, 10);
);
function sideScroll(element, direction, speed, distance, step)
scrollAmount = 0;
var slideTimer = setInterval(function ()
if (direction == 'left')
element.scrollLeft -= step;
else
element.scrollLeft += step;
scrollAmount += step;
if (scrollAmount >= distance)
window.clearInterval(slideTimer);
, speed);
); body
background-color: #ccc;
.carousel-control-prev
background-color: red;
.carousel-control-next
background-color: green;
.carousel-indicators
overflow: auto;
overflow-y: hidden;
-ms-overflow-style: scroll;
scrollbar-width: none;
position: relative !important;
margin-right: 0 !important;
margin-left: 0 !important;
.carousel-indicators::-webkit-scrollbar
display: none;
.carousel-indicators li
height: 3.75rem !important;
width: 5rem !important;
ol li img.img-tn
height: 100%;
display: block;
object-fit: cover;
padding: 0.10rem;
.carousel-control-prev-icon-thumbs
.carousel-control-next-icon-thumbs
.carousel-inner
width: 100%;
height: 75%;
figure picture img.image-cover
width: 100%;
height: 25rem;
object-fit: cover;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container my-4">
<div class="row">
<div class="col-md-10 offset-md-1">
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">
<!--Upper Level-->
<div>
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--Image 1-->
<figure class="carousel-item active">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 1-->
<!--Image 2-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 2-->
<!--Image 3-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 3-->
<!--Image 4-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISzf6rojuu8blc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 4-->
<!--Image 5-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISj323o6mesglc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 5-->
<!--Image 6-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISbxzq50i6kjlc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 6-->
<!--Image 7-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 7-->
<!--Image 8-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnetqmg5ivrlc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 8-->
<!--Image 9-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS72p2m3x1fxlc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 9-->
<!--Image 10-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISzvmq3xst60mc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 10-->
<!--Image 11-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISrpkelqoly2mc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 11-->
<!--Image 12-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISbdgqkdg5i8mc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 12-->
<!--Image 13-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://p.askareen.com/1/141152923/4.jpg" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 13-->
</div>
<!--/.Slides-->
<!--Controls-->
<div>
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/.Controls-->
</div>
<!--./Upper Level-->
<!--Thumbnails-->
<div class="scoll-pane" id="scoll_pane">
<ol class="carousel-indicators" id="carousel_indicators">
<!--Thumbnail 1-->
<li data-target="#carousel-thumb" data-slide-to="0" class="active">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 1-->
<!--Thumbnail 2-->
<li data-target="#carousel-thumb" data-slide-to="1">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" class="img-tn">
</picture>
</li>
<!--Thumbnail 2-->
<!--Thumbnail 3-->
<li data-target="#carousel-thumb" data-slide-to="2">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 3-->
<!--Thumbnail 4-->
<li data-target="#carousel-thumb" data-slide-to="3">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISzf6rojuu8blc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 4-->
<!--Thumbnail 5-->
<li data-target="#carousel-thumb" data-slide-to="4">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISj323o6mesglc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 5-->
<!--Thumbnail 6-->
<li data-target="#carousel-thumb" data-slide-to="5">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 6-->
<!--Thumbnail 7-->
<li data-target="#carousel-thumb" data-slide-to="6">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 7-->
<!--Thumbnail 8-->
<li data-target="#carousel-thumb" data-slide-to="7">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISnetqmg5ivrlc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 8-->
<!--Thumbnail 9-->
<li data-target="#carousel-thumb" data-slide-to="8">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/IS72p2m3x1fxlc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 9-->
<!--Thumbnail 10-->
<li data-target="#carousel-thumb" data-slide-to="9">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISzvmq3xst60mc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 10-->
<!--Thumbnail 11-->
<li data-target="#carousel-thumb" data-slide-to="10">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISrpkelqoly2mc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 11-->
<!--Thumbnail 12-->
<li data-target="#carousel-thumb" data-slide-to="11">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISbdgqkdg5i8mc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 12-->
<!--Thumbnail 13-->
<li data-target="#carousel-thumb" data-slide-to="12">
<picture>
<img src="https://p.askareen.com/1/141152923/4.jpg" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 13-->
</ol>
<!--Silder Controls-->
<div class="text-center">
<a class="carousel-control-prev-thumbs" href="#" id="slideBack1">
<span class="carousel-control-prev-icon-thumbs" aria-hidden="true"></span>
<span>Previous</span>
</a>
<a class="carousel-control-next-thumbs" href="#" id="slideNext1">
<span class="carousel-control-next-icon-thumbs" aria-hidden="true"></span>
<span>Next</span>
</a>
</div>
<!--/.Silder Controls-->
</div>
<!--/.Thumbnails-->
</div>
<!--/.Carousel Wrapper-->
</div>
</div>
</div>https://jsfiddle.net/h02pvquk/
【问题讨论】：
又是轮播问题，目标不同，很好 【参考方案1】：将控件插入.carousel-inner 可以解决问题1。
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">
<!--Upper Level-->
<div>
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!-- Images ... -->
<!--Controls-->
<div>
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/.Controls-->
</div>
<!--/.Slides-->
</div>
<!--./Upper Level-->
</div>
<!--/.Carousel Wrapper-->
看下面问题摘录的代码，问题2可以使用.carousel-control-prev-icon、.carousel-control-next-icon类代替.carousel-control-prev-icon-thumbs、carousel-control-next-icon-thumbs。
<!--Silder Controls-->
<div class="text-center">
<a class="carousel-control-prev-thumbs" href="#" id="slideBack1">
<span class="carousel-control-prev-icon-thumbs" aria-hidden="true"></span>
<span>Previous</span>
</a>
<a class="carousel-control-next-thumbs" href="#" id="slideNext1">
<span class="carousel-control-next-icon-thumbs" aria-hidden="true"></span>
<span>Next</span>
</a>
</div>
<!--/.Silder Controls-->
最终代码如下所示：
window.addEventListener('load', function()
var button = document.getElementById('slideBack1');
var container = document.getElementById('carousel_indicators');
button.addEventListener("click", function(event)
event.preventDefault();
sideScroll(container, 'left', 25, 100, 10); //right->left
);
var back = document.getElementById('slideNext1');
back.addEventListener("click", function(event)
event.preventDefault();
sideScroll(container, 'right', 25, 100, 10);//left->right
);
function sideScroll(element, direction, speed, distance, step)
scrollAmount = 0;
var slideTimer = setInterval(function()
if (direction == 'left')
element.scrollLeft -= step;
else
element.scrollLeft += step;
scrollAmount += step;
if (scrollAmount >= distance)
window.clearInterval(slideTimer);
, speed);
);body
background-color: #ccc;
#slideBack1>.carousel-control-prev-icon
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
#slideNext1>.carousel-control-next-icon
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23009be1' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
#scoll_pane
position: relative;
#slideBack1, #slideNext1
z-index: 16;
background: yellow;
.carousel-control-prev
background-color: red;
.carousel-control-next
background-color: green;
.carousel-indicators
overflow: auto;
overflow-y: hidden;
-ms-overflow-style: scroll;
scrollbar-width: none;
position: relative !important;
margin-right: 0 !important;
margin-left: 0 !important;
.carousel-indicators::-webkit-scrollbar
display: none;
.carousel-indicators li
height: 3.75rem !important;
width: 5rem !important;
ol li img.img-tn
height: 100%;
display: block;
object-fit: cover;
padding: 0.10rem;
.carousel-control-prev-icon-thumbs
.carousel-control-next-icon-thumbs
.carousel-inner
width: 100%;
height: 75%;
figure picture img.image-cover
width: 100%;
height: 25rem;
object-fit: cover;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container my-4">
<div class="row">
<div class="col-md-10 offset-md-1">
<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel" data-interval="false">
<!--Upper Level-->
<div>
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--Image 1-->
<figure class="carousel-item active">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 1-->
<!--Image 2-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 2-->
<!--Image 3-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 3-->
<!--Image 4-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISzf6rojuu8blc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 4-->
<!--Image 5-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISj323o6mesglc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 5-->
<!--Image 6-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISbxzq50i6kjlc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 6-->
<!--Image 7-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 7-->
<!--Image 8-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISnetqmg5ivrlc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 8-->
<!--Image 9-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/IS72p2m3x1fxlc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 9-->
<!--Image 10-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISzvmq3xst60mc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 10-->
<!--Image 11-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISrpkelqoly2mc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 11-->
<!--Image 12-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://photos.zillowstatic.com/cc_ft_384/ISbdgqkdg5i8mc0000000000.webp" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 12-->
<!--Image 13-->
<figure class="carousel-item">
<picture>
<img class="image-cover" src="https://p.askareen.com/1/141152923/4.jpg" >
</picture>
<figcaption class="carousel-caption d-none d-md-block">I am an image caption</figcaption>
</figure>
<!--/.Image 13-->
<!--Controls-->
<div>
<a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/.Controls-->
</div>
<!--/.Slides-->
</div>
<!--./Upper Level-->
<!--Thumbnails-->
<div class="scoll-pane" id="scoll_pane">
<ol class="carousel-indicators justify-content-start" id="carousel_indicators">
<!--Thumbnail 1-->
<li data-target="#carousel-thumb" data-slide-to="0" class="active">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_768/ISv4f3q9br50lc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 1-->
<!--Thumbnail 2-->
<li data-target="#carousel-thumb" data-slide-to="1">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISnycr737jx2lc0000000000.webp" class="img-tn">
</picture>
</li>
<!--Thumbnail 2-->
<!--Thumbnail 3-->
<li data-target="#carousel-thumb" data-slide-to="2">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/IS7m837qy2h8lc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 3-->
<!--Thumbnail 4-->
<li data-target="#carousel-thumb" data-slide-to="3">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISzf6rojuu8blc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 4-->
<!--Thumbnail 5-->
<li data-target="#carousel-thumb" data-slide-to="4">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISj323o6mesglc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 5-->
<!--Thumbnail 6-->
<li data-target="#carousel-thumb" data-slide-to="5">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 6-->
<!--Thumbnail 7-->
<li data-target="#carousel-thumb" data-slide-to="6">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/IS3rxentdybmlc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 7-->
<!--Thumbnail 8-->
<li data-target="#carousel-thumb" data-slide-to="7">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISnetqmg5ivrlc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 8-->
<!--Thumbnail 9-->
<li data-target="#carousel-thumb" data-slide-to="8">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/IS72p2m3x1fxlc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 9-->
<!--Thumbnail 10-->
<li data-target="#carousel-thumb" data-slide-to="9">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISzvmq3xst60mc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 10-->
<!--Thumbnail 11-->
<li data-target="#carousel-thumb" data-slide-to="10">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISrpkelqoly2mc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 11-->
<!--Thumbnail 12-->
<li data-target="#carousel-thumb" data-slide-to="11">
<picture>
<img src="https://photos.zillowstatic.com/cc_ft_384/ISbdgqkdg5i8mc0000000000.webp" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 12-->
<!--Thumbnail 13-->
<li data-target="#carousel-thumb" data-slide-to="12">
<picture>
<img src="https://p.askareen.com/1/141152923/4.jpg" class="img-tn">
</picture>
</li>
<!--/.Thumbnail 13-->
</ol>
<!--Silder Controls-->
<div class="text-center">
<a class="carousel-control-prev" href="#" id="slideBack1">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#" id="slideNext1">
<span class="sr-only">Next</span>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<!--/.Silder Controls-->
</div>
<!--/.Thumbnails-->
</div>
<!--/.Carousel Wrapper-->
</div>
</div>
</div>【讨论】：
感谢您的回答！我需要 Previous 和 Next 按钮仅显示为箭头，一个在最左边，一个在最右边，在缩略图上方，就像箭头上的箭头一样幻灯片。我不希望按钮像没有那样单独显示 @John 我更新了代码 sn-p。和jsfiddle。这适合您吗？ @sanriot 我喜欢你的回答和解决问题的精神 @NishargShah 感谢您的反馈！我想重新考虑答案句的结构，以便清楚我要传达的内容。我的回答有什么问题？ @John 尝试将border: none; 应用到#carousel_indicators > li 和margin-bottom: 0 到#carousel-thumb figure.carousel-item。以上是关于如何在引导轮播下使缩略图可滚动？的主要内容，如果未能解决你的问题，请参考以下文章