Bootstrap Modal+Carousel图库点击缩略图无图片显示问题

我来帮你搞定这个问题！你遇到的核心问题是模态框还没完全加载完成时，就触发了轮播图的切换指令，这时候轮播组件还没被正确初始化，所以点击缩略图后模态框里的图片没法正常显示。下面是修复后的完整代码，以及关键改动的说明：

关键改动点 #

• 移除了li标签上的data-toggle="modal"和data-target="#myModal"，把模态框的触发逻辑放到JavaScript里手动处理
• 给每个缩略图的a标签新增了data-slide-index属性，用来标记对应的轮播幻灯片索引
• 添加了自定义JS代码，监听缩略图点击事件：先打开模态框，等模态框完全显示后，再切换到指定的轮播幻灯片

修复后的完整代码 #

<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Latest stable release of jQuery Core Library-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    // 监听缩略图点击事件
    $('.gallery-thumbnail').click(function(e) {
        e.preventDefault();
        var slideIndex = $(this).data('slide-index');
        // 手动打开模态框
        $('#myModal').modal('show');
        // 模态框完全显示后切换轮播
        $('#myModal').on('shown.bs.modal', function() {
            $('#myGallery').carousel(slideIndex);
            // 解绑事件，避免重复触发
            $(this).off('shown.bs.modal');
        });
    });
});
</script>

<ul class="list-inline">
<li><a href="#myGallery" class="gallery-thumbnail" data-slide-index="0"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/1"><br> Caption</a></li>
<li><a href="#myGallery" class="gallery-thumbnail" data-slide-index="1"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/2"><br> Caption</a></li>
<li><a href="#myGallery" class="gallery-thumbnail" data-slide-index="2"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/3"><br> Caption</a></li>
<li><a href="#myGallery" class="gallery-thumbnail" data-slide-index="3"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/4"><br> Caption</a></li>
<li><a href="#myGallery" class="gallery-thumbnail" data-slide-index="4"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/5"><br> Caption</a></li>
<li><a href="#myGallery" class="gallery-thumbnail" data-slide-index="5"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/6"><br> Caption</a></li>
<!--end of thumbnails-->
</ul>
<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">My Gallery Title</div>
<button type="button" class="close" data-dismiss="modal" title="Close">
<span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="modal-body">
<!--CAROUSEL CODE GOES HERE-->
<!--begin carousel-->
<div id="myGallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="https://placeimg.com/600/400/nature/1" alt="item0">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 0 description.</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/600/400/nature/2" alt="item1">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 1 description.</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/600/400/nature/3" alt="item2">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 2 description.</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/600/400/nature/4" alt="item3">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 3 description.</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/600/400/nature/5" alt="item4">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 4 description.</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/600/400/nature/6" alt="item5">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 5 description.</p>
</div>
</div>
<!--end carousel-inner--></div>
<!--Begin Previous and Next buttons-->
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myGallery" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
<!--end carousel--></div>
<!--end modal-body--></div>
<div class="modal-footer">
<div class="pull-left">
<small>Photographs by <a href="https://placeimg.com" target="new">placeimg.com</a></small>
</div>
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
<!--end modal-footer--></div>
<!--end modal-content--></div>
<!--end modal-dialog--></div>
<!--end modal-->

为什么这样改能解决问题？ #

Bootstrap的data-slide-to指令依赖轮播组件已经在DOM中可见并完成初始化。但你的原始代码里，模态框初始是隐藏状态，点击缩略图时同时触发模态框打开和轮播切换，这时候轮播组件还没被渲染到可见状态，切换指令自然失效。

通过先手动打开模态框，再监听shown.bs.modal事件（这个事件在模态框完全显示后才触发），此时轮播组件已经完成初始化，再调用carousel(slideIndex)就能准确切换到对应的图片了。

内容的提问来源于stack exchange，提问作者Daniel