Question

我设法将一个bootstrap3模式框作为我的缩略图的img滑块。我唯一剩下的问题是，如果我点击一个img它滑块总是从某个地方开始..而不是我点击的img。请帮我！！！这是我的代码：

<div class="container"data-toggle="modal" data-target="#myModal"> <div class="row"> <h1>Zeichnungen</h1> <div class="row"> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/1.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/2.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/3.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/4.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/5.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/6.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 7" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/7.jpg"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="Zeichnungen/8.jpg"></a></div> </div> </div> </div>

`

    <!-- Modal-->       
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" style="display: none;" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
            <div class="modal-body">
                <div id="modalCarousel" class="carousel">
                    <div class="carousel-inner">
                        <div class="item" title="Image 1">
                            <h3 class="modal-title">Image 1</h3>
                            <a href="#" title="Image 1"><img class="thumbnail img-responsive" src="Zeichnungen/1.jpg"></a>
                        </div>
                        <div class="item " title="Image 2">
                            <h3 class="modal-title">Image 2</h3>
                            <a href="#" title="Image 2">
                                <img class="thumbnail img-responsive" src="Zeichnungen/2.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 3"><h3 class="modal-title">Image 3</h3>
                            <a href="#" title="Image 3">
                                <img class="thumbnail img-responsive" src="Zeichnungen/3.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 4"><h3 class="modal-title">Image 4</h3>
                            <a href="#" title="Image 4">
                                <img class="thumbnail img-responsive" src="Zeichnungen/4.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 5"<h3 class="modal-title">Image 5</h3>
                            <a href="#" title="Image 5">
                                <img class="thumbnail img-responsive" src="Zeichnungen/5.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 6"<h3 class="modal-title">Image 6</h3>
                            <a href="#" title="Image 6">
                                <img class="thumbnail img-responsive" src="Zeichnungen/6.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 7"<h3 class="modal-title">Image 7</h3>
                            <a href="#" title="Image 7">
                                <img class="thumbnail img-responsive" src="Zeichnungen/7.jpg">
                            </a>
                        </div>
                        <div class="item" title="Image 8"<h3 class="modal-title">Image 8</h3>
                            <a href="#" title="Image 8">
                                <img class="thumbnail img-responsive" src="Zeichnungen/8.jpg">
                            </a>
                        </div>

                    </div>
                    <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                    <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Modal end-->`

Answer 1

要让缩略图链接到幻灯片中的图像，您必须将这些缩略图与模态目标的数据属性及其应引用的幻灯片相关联。这里的文档：http://getbootstrap.com/javascript/#carousel

示例：

<div class="col-lg-3 col-sm-4 col-xs-6">
  <a title="Image 3" href="#" data-target="#myModal" data-slide-to="2">
    <img class="thumbnail img-responsive" src="Zeichnungen/3.jpg">
  </a>
</div>

我试图将img模态框链接到img我点击但它不会工作

1 个答案: