html - 模态中的引导轮播显示不止一张幻灯片
问题描述
我在 Modal 中创建了一个 Bootstrap Carousel。模态显示不止一张幻灯片，但我不知道如何制作它，以便您单击的图像是居中的幻灯片，在任一侧显示上一张和下一张幻灯片。
我的工作代码在这里：https ://codepen.io/IHateSlugs/pen/LYxPxWr
完整代码：使用 Bootstrap 4.4.1 和 Popper 1.16.0
<div class="row" id="gallery" data-toggle="modal" data-target="#exampleModal">
<div class="col-12 col-sm-6 col-lg-3">
<div class="ingredient_box" data-target="#carouselExample" data-slide-to="0">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient1</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="ingredient_box" data-target="#carouselExample" data-slide-to="1">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient2</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="ingredient_box" data-target="#carouselExample" data-slide-to="2">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient3</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="ingredient_box" data-target="#carouselExample" data-slide-to="3">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient4</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="ingredient_box" data-target="#carouselExample" data-slide-to="4">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient5</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="ingredient_box" data-target="#carouselExample" data-slide-to="5">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient6</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
</div>
<!-- Modal -->
<!--
This part is straight out of Bootstrap docs. Just a carousel inside a modal.
-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="carouselExample" class="carousel slide multi-item-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
<li data-target="#carouselExample" data-slide-to="3"></li>
<li data-target="#carouselExample" data-slide-to="4"></li>
<li data-target="#carouselExample" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="ingredient_box ingredient_modal">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient1</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="carousel-item">
<div class="ingredient_box ingredient_modal">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient2</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="carousel-item">
<div class="ingredient_box ingredient_modal">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient3</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="carousel-item">
<div class="ingredient_box ingredient_modal">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient4</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="carousel-item">
<div class="ingredient_box ingredient_modal">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient5</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
<div class="carousel-item">
<div class="ingredient_box ingredient_modal">
<div class="flex jc_between al_center pb_20">
<h4 class="h4">ingredient6</h4>
<img src="https://cdn.shopify.com/s/files/1/0552/7204/6775/files/196x148_igredients_196x148.jpg?v=1616165286" />
</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="origin">Origin Location</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" 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 class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
.ingredient_box {
padding: 0 0 30px 20px; margin-bottom:20px;
background-color: #ABFFFA;
}
p.origin{margin-bottom:0; font-style:italic;}
.product_story_images {align-items:center;justify-content: center;margin-bottom:40px;}
.flex {display:flex;
flex-direction:row;}
.medium-up--one-third {
width: 33.33333%; }
.grid--uniform .medium-up--one-third:nth-child(3n+1) {
clear: both;
}
.grid__item {
float: left;
padding-left: 30px;
}
.al_center {
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.jc_between {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
.modal-dialog {
max-width: 80%;
margin: 1.75rem auto;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
.ingredient_modal {
width: 33%;
display: inline-block;
}
$('#carouselExample').carousel({
interval: 90000
})
$('.carousel .carousel-item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
解决方案
推荐阅读
- r - 用于查找值和写回数据的循环函数
- javascript - Binding cascading dropdown button in angular
- android - How to show Alert Dialog when the activities are in transition phase from one activity to another?
- c# - 如何处理 WPF 中的拖放？
- postgresql - 刷新物化视图产生错误：无法创建唯一索引
- docker - Hazelcast：无法加入集群。立即关闭
- ruby - rubocop 缩进多行赋值规则
- c++ - 异步操作的 Asio 处理程序不会被调用，而它们的同步对应物工作正常
- google-app-engine - 配置 Google App Engine 以提供 JS 客户端应用程序
- java - 迁移 androidX 后无法实例化片段 com.google.android.gms.maps.SupportMapFragment