The only thing we really need to do in the markup is create a modal element and reference that modal in the carousel's slide elements so as to link them together. First, let's create the modal. We only want a bare-bones modal here—an image, a close button, and a title. We have already seen how to create modals before, so let's just add the markup we need to our HTML. We will add it just above the carousel element:

 <div class="modal fade carousel-modal" id="carousel-modal" 
  tabindex="-1" role="dialog">
    <div class="modal-dialog">
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" class="close" data-dismiss
                ="modal" aria-label="Close"><span aria-hidden=
                "true">&times;</span></button>
               <h4 class="modal-title"></h4>
           </div>
           <div class="modal-body">
               <img>
           </div>
       </div>
    </div>
 </div>

We have created a very simple modal here. We added a carousel-modal class to the parent element for any styles we may need to apply, and we attributed carousel-modal as the id for the modal. We have an empty modal-title element, which we will populate dynamically. Most interestingly, we have an empty img tag in the modal-body element. It isn't often that you see an img tag with no src attribute, but our extension will create this attribute dynamically. We could, of course, have created a different modal for each image, but that wouldn't scale, and it just wouldn't be interesting!

That's our simple modal window declared. Great. Now we just need to reference the modal in our slides. On each img element within the carousel, simply add a data-modal-picture attribute with the #carousel-modal value. Observe the following code:

    <div class="carousel-inner" role="listbox">
   <div style="height: 400px" class="carousel-item active">
      <img class="d-block img-fluid" src="images/brazil.png" 
         data-modal-picture="#carousel-modal">
      <div class="carousel-caption">
         Brazil
      </div>
   </div>
   <div style="height: 400px" class="carousel-item">
      <img class="d-block img-fluid" src="images/datsun.png" 
         data-modal-picture="#carousel-modal">
      <div class="carousel-caption">
         Datsun 260Z
      </div>
   </div>
   <div style="height: 400px" class="carousel-item">
      <img class="d-block img-fluid" src="images/skydive.png" 
         data-modal-picture="#carousel-modal">
      <div class="carousel-caption">
         Skydive
      </div>
   </div>
</div>

The data-modal-picture attribute is the data-attribute we will hook our on-click listener to in the very same way that alert hooked into data-dismiss. Let's set up our carousel plugin extension and wire all this together.