title: Bootstrap Modal Carousel not showing previous slide on previous slide link
body: <p>I am using bootstrap3 and trying to display a gallery of images using Bootstrap Modal carousel. I found the below mentioned code from github. Everything works fine except the previous slide link. Its not making the slider moves backward to previus slide/image. Can anybody please help me with the issue.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div&gt;
          &lt;div class="row thumb-gallery"&gt;
              &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;&lt;a title="Deer Yard 1" href="#"&gt;
                  &lt;img class="thumbnail img-responsive" src="images/Deer-Yards-1.jpg"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;&lt;a title="Deer Yard 2" href="#"&gt;
                  &lt;img class="thumbnail img-responsive" src="images/Deer-Yards-2.jpg"&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-sm-4 col-xs-6"&gt;&lt;a title="Deer Yard 3" href="#"&gt;
                  &lt;img class="thumbnail img-responsive" src="images/Deer-Yards-3.jpg"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  
   &lt;div class="modal" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button class="close" type="button" data-dismiss="modal"&gt;×&lt;/button&gt;
                  &lt;h3 class="modal-title"&gt;&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div id="modalCarousel" class="carousel"&gt;
                      &lt;div class="carousel-inner"&gt;&lt;/div&gt;
                      &lt;a class="carousel-control left" href="#modaCarousel" data-slide="prev"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;a class="carousel-control right" href="#modalCarousel" data-slide="next"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!--modal content--&gt;
      &lt;/div&gt; &lt;!--modal dialog--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using the jquery code:</p>
  
  <pre><code>/* copy loaded thumbnails into carousel */
  $('.row .thumbnail').on('load', function() {
  
  }).each(function(i) {
    if(this.complete) {
      var item = $('&lt;div class="item"&gt;&lt;/div&gt;');
  
      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
  });
  </code></pre>