html - Bootstrap Carousel inside modal

Question

I have a bootstrap modal setup with a carousel inside. If you click on a link from an image outside it will show the modal with the modal-title in the header. I have it working on each link but I need the modal-title to change when you click the next/back button on the carousel.

Can anyone please help me out with the jquery?

This is my code.

HTML:

  <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 isotope-item web-design-port">
         <div class="portfolio-container">
          <div class="portfolio-image">
           <img class="img-responsive" src="images/project_1.jpg">
             <div class="portfolio-overlayer"></div>
              <div class="portfolio-info clearfix">
               <div class="portfolio-title">Website Design</div>
               <div class="portfolio-category">Website</div>
                <a title="Website One" class="btn web-progect-mod" data-slide="0"><i class="fa fa-link"></i></a>
              </div>
          </div>
         </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 isotope-item web-design-port">
         <div class="portfolio-container">
          <div class="portfolio-image">
           <img class="img-responsive" src="images/project_2.jpg">
             <div class="portfolio-overlayer"></div>
              <div class="portfolio-info clearfix">
               <div class="portfolio-title">Website Design</div>
               <div class="portfolio-category">Website</div>
                <a title="Website Two" class="btn web-progect-mod" data-slide="1"><i class="fa fa-link"></i></a>
              </div>
          </div>
         </div>
        </div>

  
        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 isotope-item web-design-port">
         <div class="portfolio-container">
          <div class="portfolio-image">
           <img class="img-responsive" src="images/project_3.jpg">
             <div class="portfolio-overlayer"></div>
              <div class="portfolio-info clearfix">
               <div class="portfolio-title">Website Design</div>
               <div class="portfolio-category">Website</div>
                <a title="Website THree" class="btn web-progect-mod" data-slide="2"><i class="fa fa-link"></i></a>
              </div>
          </div>
         </div>
        </div>
        
        
        
        
        
        
        
        
        
        
          <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-interval="false">
     <div class="modal-dialog modal-lg">
      <div class="modal-content">

       <div class="modal-header">
        <h5 class="modal-title" id="modaltitle"></h5>
        <button type="button"  class="btn-next" href="#MyCarousel" data-slide="prev"><i class="fa fa-angle-left"></i></button>
        <button type="button"  class="btn-prev" href="#MyCarousel" data-slide="next"><i class="fa fa-angle-right"></i></button>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
       </div><!-- End .modal-header -->

     <div class="modal-body">
      <div class="carousel slide" data-interval="false" id="MyCarousel">
       <div class="carousel-inner">


          <div class="item active" id="modal1">
            <img src="images/portfolio/website/project_1.jpg" alt="Image Example">
          </div><!-- End .item -->

          <div class="item">
           <img src="images/portfolio/website/project_2.jpg" alt="Image Example">
          </div><!-- End .item -->

          <div class="item">
           <img src="images/portfolio/website/project_3.jpg" alt="Image Example">
          </div><!-- End .item -->

      
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>

JQuery:

$(function() {
  $('.web-progect-mod').on('click', function(event) {
      $('#modaltitle').text(this.title);
    //Gets the Item that was clicked
    var $this = $(event.currentTarget);
    $('#myModal').modal('show');
    //Use the slide number of the clicked Item to open the slide on the carousel
    $('#MyCarousel').carousel($this.data('slide'));
  });
});

Link to JSFiddle

Answer 1

等待大神答复