css - 如何在引导轮播下使缩略图可滚动?
问题描述
我正在尝试将Bootstrap 4.4 轮播中的指示器从破折号更改为幻灯片下的缩略图。我还希望能够分别滚动/滑动缩略图以使用户能够浏览所有缩略图。
我能够将指标从破折号更改为缩略图。但是,我遇到了以下挑战
- 问题 1:左箭头(红色)和右箭头(绿色)与我的缩略图容器重叠,这使得箭头不在滑块中垂直居中,而是在整个轮播中垂直居中。
- 问题 2:由于上面的问题 1 ,我需要将最底部的上一个和下一个链接更改为左侧的箭头形状和右侧的另一个箭头以滚动缩略图。
如何解决以上 2 个问题?
这是我的代码,也可以在以下小提琴中找到
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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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>
解决方案
将控件插入.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
class 而不是.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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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" alt="First slide">
</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>
推荐阅读
- html - 我怎样才能对齐
- expo - 导入自己的 tensorflow 模型来响应原生
- javascript - Firestore 中断查询
- git - 从 EC2 添加 Git 和复制文件
- r - 在 R 中,如何从自定义打印函数可靠地打印对象的名称?
- html - React 样式或 CSS 中的 if/else
- kubernetes - kubectl 描述未知的速记标志 -o
- utf-8 - 在 Powershell 7 中使用 enwik9(来自 UTF-8 多字节字符的子字符串)
- class - 如何在 UML 中指定“一次一个”?
- java - Selenium - 使用 Apache POI 从 Excel 读取在线程“main”java.lang.IllegalArgumentException 中给出异常:单元格索引必须 >= 0