【发布时间】：2019-12-06 16:15:40
【问题描述】：
$('.carousel .vertical .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=1;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});.carousel-inner.vertical {
height: 100%; /*Note: set specific height here if not, there will be some issues with IE browser*/
}
.carousel-inner.vertical > .carousel-item {
-webkit-transition: .6s ease-in-out top !important;
-o-transition: .6s ease-in-out top !important;
transition: .6s ease-in-out top !important;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel-inner.vertical > .carousel-item {
-webkit-transition: -webkit-transform .6s ease-in-out !important;
-o-transition: -o-transform .6s ease-in-out !important;
transition: transform .6s ease-in-out !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
-webkit-perspective: 1000 !important;
perspective: 1000 !important;
}
.carousel-inner.vertical > .carousel-item.carousel-item-next,
.carousel-inner.vertical > .carousel-item.active.carousel-item-right {
-webkit-transform: translate3d(0, 33.33%, 0) !important;
transform: translate3d(0, 33.33%, 0) !important;
top: 0 !important;
}
.carousel-inner.vertical > .carousel-item.carousel-item-prev,
.carousel-inner.vertical > .carousel-item.active.carousel-item-left {
-webkit-transform: translate3d(0, -33.33%, 0) !important;
transform: translate3d(0, -33.33%, 0) !important;
top: 0 !important;
}
.carousel-inner.vertical > .carousel-item.carousel-item-next.carousel-item-left,
.carousel-inner.vertical > .carousel-item.carousel-item-prev.carousel-item-right,
.carousel-inner.vertical > .carousel-item.active {
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
top: 0;
}
}
.carousel-inner.vertical > .active {
top: 0;
}
.carousel-inner.vertical > .carousel-item-next,
.carousel-inner.vertical > .carousel-item-prev {
top: 0;
height: 100%;
width: auto;
}
.carousel-inner.vertical > .carousel-item-next {
carousel-item-left: 0;
top: 33.33%;
carousel-item-right:0;
}
.carousel-inner.vertical > .carousel-item-prev {
carousel-item-left: 0;
top: -33.33%;
carousel-item-right:0;
}
.carousel-inner.vertical > .carousel-item-next.carousel-item-left,
.carousel-inner.vertical > .carousel-item-prev.carousel-item-right {
top: 0;
}
.carousel-inner.vertical > .active.carousel-item-left {
carousel-item-left: 0;
top: -33.33%;
carousel-item-right:0;
}
.carousel-inner.vertical > .active.carousel-item-right {
carousel-item-left: 0;
top: 33.33%;
carousel-item-right:0;
}
#carousel-pager .carousel-item-left.carousel-control-carousel-item-prev {
bottom: initial;
width: 100%;
}
#carousel-pager .carousel-item-right.carousel-control-carousel-item-next {
top: initial;
width: 100%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-3">
<div id="carousel-pager" class="carousel slide " data-ride="false" data-interval="500000000">
<!-- Carousel items -->
<div class="carousel-inner vertical">
<div class="carousel-item active" >
<img src="http://placehold.it/600/f44336/000000&text=First+Slide" id="carousel-selector-1" class="img-fluid" data-target="#carousel-main" data-slide-to="0">
</div>
<div class="carousel-item" >
<img src="http://placehold.it/600/e91e63/000000&text=Second+Slide" id="carousel-selector-1" class="img-fluid" data-target="#carousel-main" data-slide-to="1">
</div>
<div class="carousel-item" >
<img src="http://placehold.it/600/9c27b0/000000&text=Third+Slide" id="carousel-selector-2" class="img-fluid" data-target="#carousel-main" data-slide-to="2">
</div>
<div class="carousel-item" >
<img src="http://placehold.it/600/9c27b0/000000&text=4+Slide" id="carousel-selector-3" class="img-fluid" data-target="#carousel-main" data-slide-to="3">
</div>
</div>
</div>
</div>
<div class="col-md-9">
<div id="carousel-main" class="carousel slide " data-ride="false" data-interval="5000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="http://placehold.it/900/f44336/000000&text=First+Slide" class="img-fluid" data-slide-number="0">
</div>
<div class="carousel-item" >
<img src="http://placehold.it/900/e91e63/000000&text=Second+Slide" class="img-fluid" data-slide-number="1">
</div>
<div class="carousel-item" >
<img src="http://placehold.it/900/9c27b0/000000&text=Third+Slide" class="img-fluid" data-slide-number="2">
</div>
<div class="carousel-item" >
<img src="http://placehold.it/900/9c2400/000000&text=4+Slide" class="img-fluid" data-slide-number="3">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control-prev" href=".carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control-next" href=".carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>我找到了这个带有垂直预览的轮播示例https://www.codeply.com/go/kARgk17JLu，但它是为引导程序 3 编写的。我对版本 4 进行了更改，一切都很好，但是在预览时同时滚动照片和大图像不起作用。请告诉我如何解决它？
【问题讨论】：
-
请将代码 sn-p 贴在问题本身中。
标签： bootstrap-4 carousel