JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://static.livedemo00.template-help.com/wt_47767/js/touchTouch.jquery.js"></script>
<link rel="stylesheet" href="http://static.livedemo00.template-help.com/wt_47767/css/touchTouch.css">
<div class="wrapper">
  <div class="image">
    <a href="http://livedemo00.template-help.com/wt_47767/img/page3_bigimg1.jpg">
      <img src="http://livedemo00.template-help.com/wt_47767/img/page3_img1.jpg"/>
    </a>
    <span><strong>Project ONE:</strong><em>Lorem ipsum dolore massa ONE</em><img src="http://livedemo00.template-help.com/wt_47767/img/searchsmall.png" alt=""/></span>
  </div>
  <div class="image">
    <a href="http://livedemo00.template-help.com/wt_47767/img/page3_bigimg2.jpg">
      <img src="http://livedemo00.template-help.com/wt_47767/img/page3_img2.jpg"/>
    </a>
    <span><strong>Project TWO:</strong><em>Lorem ipsum dolore massa TWO long long long long long long long long long long long long long long long long long long long long</em><img src="http://livedemo00.template-help.com/wt_47767/img/searchsmall.png" alt=""/></span>
  </div>
</div>

CSS

/* hide the captions (not hothering with the hover slide for this fiddle) */
.image span{
  display: none;
}

/* make more space for a caption in the slider, in case the image is streched fully vertically */
.placeholder{
  position: relative;
  bottom: 1.6em;
}

/* style the caption (if it's long and wraps, it will encroach upwards) */
.caption{
  background-color: #333;
  position: absolute;
  bottom: -1.6em;
  line-height: 1em;
  min-height: 1em;
  padding: .3em 1em;
  left: 0;
  background-color: #666;
  color: #fff;
  opacity: .8;
  width: calc(100% - 2em);
  white-space: normal;
}

/* Hiding the arrows with CSS */
#prevArrow, #nextArrow {
  display: none;
}

JavaScript

$(window).load( function(){	
    
    $(".image a").touchTouch();
    
    $(".image a").on("click", function() {
        
        // get all the captions (should probably be done with variable referring to something about above selector)
        var allcaptions = $(".image span");
        
        // setTimeout is a hack here, since the ".placeholders" don't exist yet
 		setTimeout(function() { 
           $(".placeholder").each(function(i){
               // in each .placeholder, copy its caption's mark-up into it (remove the img first)
               var caption = allcaptions.eq(i).clone();
               caption.find("img").remove();
               $(this).append("<div class='caption'>" + caption.html() + "</div>");
           });
    	}, 2000);
    });

});