Bootstrap 4.0.0 模态轮播相册动画调整大小错误
Bootstrap 4.0.0 modal carousel albums animate resize bug
我正在尝试创建一个由相册(模态)组成的画廊;每个模态里面都有一个基本的轮播幻灯片。
里面的图片可以有不同的高度:我找到了动画高度变化的方法,但是当我用 data-slide-to="x"
打开模式时直接打开不同高度的图像,不会显示。
我做了一个fiddle的问题:here
如果你打开第一个模式并浏览图片,一切都可以。但是,如果您在幻灯片 1 或 3(方形)上关闭第一个模态,然后打开第二个模态(重定向到幻灯片 2,它具有不同的高度),动画会突然 height: 0
我该如何解决这个问题?谢谢。
问题是您在同一个 html 元素上设置了轮播和模式,所以 e.relatedTarget
不是您所期望的
我建议将旋转木马 div 移动到模态主体内部并为其赋予自己的 ID,如下所示:
$('.carousel').on('slide.bs.carousel', function(e) {
$(this).find('.carousel-inner').animate({
height: $(e.relatedTarget).height()
}, 300);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container text-center py-4 my-5">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/400x300?text=first%20album" class="w-100">
<div class="card-body">
<p class="card-text text-dark">first element</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#lightbox" class="btn btn-sm btn-primary px-4" data-toggle="modal" data-slide-to="0" role="button">open</a>
<button type="button" class="btn btn-sm btn-secondary">
some action
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/400x300?text=second%20album" class="w-100">
<div class="card-body">
<p class="card-text text-dark">second element</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#lightbox" class="btn btn-sm btn-primary px-4" data-toggle="modal" data-slide-to="1" role="button">open</a>
<button type="button" class="btn btn-sm btn-secondary">
another action
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="lightbox" class="modal fade position-absolute" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="carousel slide" data-ride="carousel" tabindex="-1" id="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="pointer active"></li>
<li data-target="#carousel" data-slide-to="1" class="pointer"></li>
<li data-target="#carousel" data-slide-to="2" class="pointer"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/350">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/700x450">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/550">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="modal-footer px-3 pb-3 pt-0">
<h5 class="modal-title text-uppercase mr-auto">Album num.X</h5>
<a href="#" role="button" data-dismiss="modal" class="btn btn-primary px-3">Close</a>
</div>
</div>
</div>
</div>
Fiddle here
我正在尝试创建一个由相册(模态)组成的画廊;每个模态里面都有一个基本的轮播幻灯片。
里面的图片可以有不同的高度:我找到了动画高度变化的方法,但是当我用 data-slide-to="x"
打开模式时直接打开不同高度的图像,不会显示。
我做了一个fiddle的问题:here
如果你打开第一个模式并浏览图片,一切都可以。但是,如果您在幻灯片 1 或 3(方形)上关闭第一个模态,然后打开第二个模态(重定向到幻灯片 2,它具有不同的高度),动画会突然 height: 0
我该如何解决这个问题?谢谢。
问题是您在同一个 html 元素上设置了轮播和模式,所以 e.relatedTarget
不是您所期望的
我建议将旋转木马 div 移动到模态主体内部并为其赋予自己的 ID,如下所示:
$('.carousel').on('slide.bs.carousel', function(e) {
$(this).find('.carousel-inner').animate({
height: $(e.relatedTarget).height()
}, 300);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container text-center py-4 my-5">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/400x300?text=first%20album" class="w-100">
<div class="card-body">
<p class="card-text text-dark">first element</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#lightbox" class="btn btn-sm btn-primary px-4" data-toggle="modal" data-slide-to="0" role="button">open</a>
<button type="button" class="btn btn-sm btn-secondary">
some action
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/400x300?text=second%20album" class="w-100">
<div class="card-body">
<p class="card-text text-dark">second element</p>
<div class="d-flex justify-content-between align-items-center">
<a href="#lightbox" class="btn btn-sm btn-primary px-4" data-toggle="modal" data-slide-to="1" role="button">open</a>
<button type="button" class="btn btn-sm btn-secondary">
another action
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="lightbox" class="modal fade position-absolute" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="carousel slide" data-ride="carousel" tabindex="-1" id="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="pointer active"></li>
<li data-target="#carousel" data-slide-to="1" class="pointer"></li>
<li data-target="#carousel" data-slide-to="2" class="pointer"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://via.placeholder.com/350">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/700x450">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://via.placeholder.com/550">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="modal-footer px-3 pb-3 pt-0">
<h5 class="modal-title text-uppercase mr-auto">Album num.X</h5>
<a href="#" role="button" data-dismiss="modal" class="btn btn-primary px-3">Close</a>
</div>
</div>
</div>
</div>
Fiddle here