Question

我正在使用bootstrap3并尝试使用Bootstrap Modal轮播显示图像库。我从github找到了下面提到的代码。除了上一张幻灯片链接外，一切正常。它不会使滑块向后移动到普通的幻灯片/图像。任何人都可以帮我解决这个问题。

这是HTML：

<div class="container">
    <div>
        <div class="row thumb-gallery">
            <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Deer Yard 1" href="#">
                <img class="thumbnail img-responsive" src="images/Deer-Yards-1.jpg"></a>
            </div>
            <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Deer Yard 2" href="#">
                <img class="thumbnail img-responsive" src="images/Deer-Yards-2.jpg"></a>
            </div>
            <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Deer Yard 3" href="#">
                <img class="thumbnail img-responsive" src="images/Deer-Yards-3.jpg"></a>
            </div>
        </div>
    </div>
</div>





 <div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal">×</button>
                <h3 class="modal-title"></h3>
            </div>
            <div class="modal-body">
                <div id="modalCarousel" class="carousel">
                    <div class="carousel-inner"></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 class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!--modal content-->
    </div> <!--modal dialog-->
</div>

我正在使用jquery代码：

/* copy loaded thumbnails into carousel */
$('.row .thumbnail').on('load', function() {

}).each(function(i) {
  if(this.complete) {
    var item = $('<div class="item"></div>');

    var itemDiv = $(this).parents('div');
    var title = $(this).parent('a').attr("title");

    item.attr("title",title);
    $(itemDiv.html()).appendTo(item);
    item.appendTo('.carousel-inner'); 
    if (i==0){ // set first item active
     item.addClass('active');
    }
  }
});

/* activate the carousel */
$('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
})

/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
    var id = parseInt(idx);
    $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected
});

Answer 1

您的代码中有一个非常小的拼写错误。

HTML中的a标记（省略内部图标）：

<a class="carousel-control left" href="#modaCarousel" data-slide="prev"></a>

......应该是：

<a class="carousel-control left" href="#modalCarousel" data-slide="prev"></a>

JSFiddle证明它有效。

调试时，请确保从源头开始（在本例中为按钮本身）并向后工作以确保每行代码都按预期编写并按预期运行。

Answer 2

在上面的代码中，href应该是href =＆＃34; #modalCarousel＆＃34;而不是href =＆＃34; #modaCarousel＆＃34;

Bootstrap Modal Carousel未在上一张幻灯片链接上显示上一张幻灯片

2 个答案: