javascript - 如何在 Bootstrap Popover 中启用 Bootstrap 4 Carousel
问题描述
我正在做这个演示,并且很想知道为什么控制按钮在 Bootstrap Popover 内的 Bootstrap 4 Carousel 上不起作用。如您所见,轮播正在运行,正如我已经添加的那样
$("[data-toggle=popover]").on('shown.bs.popover', function () {
$('.carousel-inner').carousel();
});
但控件不起作用:
$("[data-toggle=popover]").each(function(i, obj) {
$(this).popover({
html: true,
content: function() {
var id = $(this).attr('id')
return $('#popover-content-' + id).html();
}
});
});
$("[data-toggle=popover]").on('shown.bs.popover', function() {
$('.carousel-inner').carousel();
});
.carousel-inner img {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<a class="btn btn-primary" data-toggle="popover" data-container="body" data-placement="right" type="button" data-html="true" href="#" id="login">Display</a>
<div id="popover-content-login" class="d-none">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
解决方案
推荐阅读
- javascript - 尝试更新用户收到错误无法发布 /update-user
- android - 来自 Android 手机的 USB 多声道音频
- c# - i am new in unity and it doesnt open projects and i dont understand the error
- sql - PLSQL 函数。要从表 Y 中检索每行记录的信息,请将其与表 X 组合并以字符串形式返回
- swift - 订阅应用程序时删除用户通知
- c# - ConcurrentBag 和多线程应用程序的潜在竞争条件
- android - Xamarin Forms - 如何在 Xamarin.Forms 4.6 中设置状态栏颜色?
- terraform-provider-azure - Azure Terraform Web App 专用终结点虚拟网络
- python - 在 Python 的 Google Sheet 中写行底部
- excel - Excel - 比较两个单元格中的字符串