jquery - 引导轮播 - 尝试一次使用 6 列，但只显示 3 列
问题描述
我从这个Codepen中获得了灵感，但是，我尝试对其进行修改以启用col-md-2Bootstrap 中的类。不幸的是，仍然只显示 3 列。
我有一个小小的想法，为什么会这样。我的理论是卡片左侧和右侧的active卡片获取类添加到它们以显示，但是，我不明白这些是如何添加的 - 我将假设它内置在默认的 Bootstrap Carousel 功能中。
无论如何，如果有人知道如何获得每行 6 列，那就太好了。这是我的代码：
$(document).ready(function() {
$("#myCarousel").on("slide.bs.carousel", function(e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 6;
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"));
}
}
}
});
});.carousel-item {
position: relative;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
transition: -webkit-transform .6s ease;
transition: transform .6s ease;
transition: transform .6s ease, -webkit-transform .6s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.card-image {
position: relative;
}
.image-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
background: rgba(0, 0, 0, 0.5);
}
.image-overlay .middle {
transition: .5s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.card .card-body .middle a {
text-decoration: none;
border-bottom: none !important;
}
.card .card-body .middle a:hover {
text-decoration: none;
border-bottom: none !important;
}
.card .image-overlay {
opacity: 1;
}
@media (min-width: 768px) {
/* show 3 items */
.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;
}
}<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-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto">
<li class="carousel-item col-md-2 active">
<div class="card text-center">
<img class="card-img-top" loading="lazy" src="https://via.placeholder.com/300.png" alt="Placeholder" />
<div class="card-body">
<h5 class="card-title m-0"><a href="/porn-tube-sites/test" class="similar-link stretched-link">test</a></h5>
</div>
</div>
</li>
<li class="carousel-item col-md-2">
<div class="card text-center">
<img class="card-img-top" loading="lazy" src="https://via.placeholder.com/300.png" alt="Placeholder" />
<div class="card-body">
<h5 class="card-title m-0"><a href="/porn-tube-sites/test" class="similar-link stretched-link">test</a></h5>
</div>
</div>
</li>
<li class="carousel-item col-md-2">
<div class="card text-center">
<img class="card-img-top" loading="lazy" src="https://via.placeholder.com/300.png" alt="Placeholder" />
<div class="card-body">
<h5 class="card-title m-0"><a href="/porn-tube-sites/test" class="similar-link stretched-link">test</a></h5>
</div>
</div>
</li>
<li class="carousel-item col-md-2">
<div class="card text-center">
<img class="card-img-top" loading="lazy" src="https://via.placeholder.com/300.png" alt="Placeholder" />
<div class="card-body">
<h5 class="card-title m-0"><a href="/porn-tube-sites/test" class="similar-link stretched-link">test</a></h5>
</div>
</div>
</li>
<li class="carousel-item col-md-2">
<div class="card text-center">
<img class="card-img-top" loading="lazy" src="https://via.placeholder.com/300.png" alt="Placeholder" />
<div class="card-body">
<h5 class="card-title m-0"><a href="/porn-tube-sites/test" class="similar-link stretched-link">test</a></h5>
</div>
</div>
</li>
<li class="carousel-item col-md-2">
<div class="card text-center">
<img class="card-img-top" loading="lazy" src="https://via.placeholder.com/300.png" alt="Placeholder" />
<div class="card-body">
<h5 class="card-title m-0"><a href="/porn-tube-sites/test" class="similar-link stretched-link">test</a></h5>
</div>
</div>
</li>
<li class="carousel-item col-md-2">
<div class="card text-center">
<img class="card-img-top" loading="lazy" src="https://via.placeholder.com/300.png" alt="Placeholder" />
<div class="card-body">
<h5 class="card-title m-0"><a href="/porn-tube-sites/test" class="similar-link stretched-link">test</a></h5>
</div>
</div>
</li>
<li class="carousel-item col-md-2">
<div class="card text-center">
<img class="card-img-top" loading="lazy" src="https://via.placeholder.com/300.png" alt="Placeholder" />
<div class="card-body">
<h5 class="card-title m-0"><a href="/porn-tube-sites/test" class="similar-link stretched-link">test</a></h5>
</div>
</div>
</li>
</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>解决方案
我曾经在这样的旋转木马中工作过，并且和我一起工作得很好，我为你定制了它，这样你就可以使用它并一次使用 6 列。这是 GitHub 存储库：
我希望它对你有帮助。
推荐阅读
- java - 如何使用 Maven 依赖项而不是源代码在 SonarCloud 上运行 Coverage
- python - PaviaU 高光谱数据集中的大值
- ethereum - Solidity - 为什么公共 Struct 变量的默认 getter 不会返回 Struct 中的每个变量
- java - 启动层初始化时出错 java.lang.module.FindException: Module javafx.graphics not found
- google-chrome - 即使“自我”源匹配，CSP 也拒绝表单提交
- flutter - 测试颤振应用
- google-sheets-formula - 结合多个条件和标题的查找功能
- ruby-on-rails - Rails Administrate：如何更改界面语言
- android - kotlin：分配类数据成员创建问题
- python - Nipype自定义界面未显示输出