我正在尝试创建一个由专辑（模态）组成的画廊；每个模态都有一个基本的轮播幻灯片。
里面的图片可以有不同的高度：我找到了动画高度变化的方法，但是当我打开模态时data-slide-to="x"，直接打开不同高度的图像，不会显示。
我做了一个问题的小提琴：here
如果您打开第一个模态并浏览图片，则一切正常。但是，如果您在幻灯片 1 或幻灯片 3（方形）上关闭第一个模态，然后打开第二个模态（重定向到具有不同高度的幻灯片 2），动画会突然执行height: 0
我该如何解决这个问题？谢谢你。
问题是你的轮播和模态在同一个 html 元素上，所以e.relatedTarget不是你所期望的
我建议将 carousel 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>在这里摆弄
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句