Блог

Я использую bootstrap3 и пытаюсь отобразить галерею изображений с помощью Bootstrap Modal carousel. Я нашел приведенный ниже код из 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
});
  

У вас очень маленькая опечатка в вашем коде.

Этот a тег в вашем HTML (без значка внутри):

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

… должно быть:

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

JSFiddle, чтобы доказать, что это работает.

При отладке обязательно начинайте с исходного кода (в данном случае с самой кнопки) и работайте в обратном направлении, чтобы убедиться, что каждая строка кода написана так, как ожидалось, и функционирует так, как ожидалось.

В приведенном выше коде href должен быть href=»#modalCarousel» вместо href=»#modaCarousel»