Bootstrap在使用角度为6的多项目轮播时滑行滞后 [英] Bootstrap Slides lagging while using multi item carousel using angular 6
本文介绍了Bootstrap在使用角度为6的多项目轮播时滑行滞后的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题是我将Angular 6，Bootstrap v4和jQuery用于多项目轮播.如果轮播上有[1,2,3,4,5,6]之类的数据，则必须显示[1,2,3].按下一个后，它必须显示[4,5,6].
My issue is I am using Angular 6, Bootstrap v4 and jQuery for the multi-item carousel. If I have data like [1,2,3,4,5,6] there on the carousel it has to show [1,2,3]. After pressing the next it has to show [4,5,6].
到目前为止，我所面临的问题是.只有第一个活动卡正在移动，并且也有滞后，并且上一个和下一个按钮不可见.请检查一次Stackblitz文件，您将了解该问题
Up to this part I achieved, I am facing issues. Only the first active card is moving and there is a lagging also and the previous and next button are not visible. Please check once Stackblitz file you will understand the issue
这是我在Stackblitz中的工作
Here is my work in Stackblitz
https://stackblitz.com/edit/angular-jvr6dh
HTML代码
<div class="container">
<div id="dataInfo">
<h2>Information</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto">
<div class="carousel-item col-md-4 active">
<div class="card">
<img class="card-img-top img-fluid" src="https://images.freeimages.com/images/large-previews/85a/daisy-s-1375598.jpg" width="100" height="100" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://images.freeimages.com/images/large-previews/85a/daisy-s-1375598.jpg" width="100" height="100" alt="Card image cap"><div class="card-body">
<h4 class="card-title">Card 2</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://images.freeimages.com/images/large-previews/85a/daisy-s-1375598.jpg" width="100" height="100" alt="Card image cap"><div class="card-body">
<h4 class="card-title">Card 3</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://images.freeimages.com/images/large-previews/85a/daisy-s-1375598.jpg" width="100" height="100" alt="Card image cap"><div class="card-body">
<h4 class="card-title">Card 4</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://images.freeimages.com/images/large-previews/85a/daisy-s-1375598.jpg" width="100" height="100" alt="Card image cap"> <div class="card-body">
<h4 class="card-title">Card 5</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://images.freeimages.com/images/large-previews/85a/daisy-s-1375598.jpg" width="100" height="100" alt="Card image cap"><div class="card-body">
<h4 class="card-title">Card 6</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="https://images.freeimages.com/images/large-previews/85a/daisy-s-1375598.jpg" width="100" height="100" alt="Card image cap"><div class="card-body">
<h4 class="card-title">Card 7</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" 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>
. ts代码:
$("#myCarousel").on("slide.bs.carousel", function(e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $(".carousel-item").length;
if (idx >= totalItems - (itemsPerSlide - 1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i = 0; i < it; i++) {
// append slides to end
if (e.direction == "left") {
$(".carousel-item")
.eq(i)
.appendTo(".carousel-inner");
} else {
$(".carousel-item")
.eq(0)
.appendTo($(this).find(".carousel-inner"));
}
}
}
});
}
.scss代码
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
推荐答案
根据您的示例代码，看起来最好是简化Bootstrap代码本身以使用标准轮播.下面的链接是您为示例提供的以下更改的分支:
Based on your example code, it looks like simplifying the Bootstrap code itself to use the standard carousel is the best approach. The link below is a fork of the example you provided with the following changes:
https://stackblitz.com/edit/angular-yaevix
- 删除了prev/next/etc上的所有自定义DOM操作.从您的JavaScript中获取信息，以便它使用Bootstrap轮播组件执行所有操作
- 删除了试图调整卡片动画和位置的CSS
- 添加了下一个/上一个图标的快速且肮脏的位置(您可以根据需要设置其样式)
您已将每张卡设置为轮播项目，但在您的说明中，您希望一次分3页.正确的方法是每三张卡有一个轮播项目.参见下面的示例
You have each card set as a carousel-item but in your description you want to paginate 3 at a time. The correct approach here is to have one carousel-item for every three cards. See example below
带有多个卡的一个轮播项目示例:
Example of one carousel item with multiple cards:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card">Card 1</div>
</div>
<div class="col-md-4">
<div class="card">Card 2</div>
</div>
<div class="col-md-4">
<div class="card">Card 3</div>
</div>
</div>
</div>
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card">Card 4</div>
</div>
<div class="col-md-4">
<div class="card">Card 5</div>
</div>
<div class="col-md-4">
<div class="card">Card 6</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card">Card 7</div>
</div>
</div>
</div>
</div>
</div>
这篇关于Bootstrap在使用角度为6的多项目轮播时滑行滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
