我有一小段HTML代码，如下所示

<div class="comment-div">
   <h2>Murtaza Ali <span>15 Aug 2016</span></h2>
   <p>I think if you managed. </p>
   <img src="https://www.google.com/images/srpr/logo6w.png" alt="Smiley face">
</div>
                       
<div class="comment-div">
   <h2>Suraj Shukla <span>15 Aug 2016</span></h2>
   <p>I think if you managed. </p>
   <img src="https://www.google.com/images/srpr/logo6w.png" alt="Smiley face">
</div>
                       
<div class="comment-div">
   <h2>Suraj <span>15 Aug 2016</span></h2>
   <p>I think if you managed. </p>
   <img src="https://www.google.com/images/srpr/logo6w.png" alt="Smiley face">
 </div>
                       
<div class="comment-div">
     <h2>Suraj <span>15 Aug 2016</span></h2>
     <p>I think if you managed. </p>
     <img src="https://www.google.com/images/srpr/logo6w.png" alt="Smiley face">
</div>

现在点击图片时，我想打开一个弹出窗口，然后滑动到下一张图片。这仅适用于移动的设备，因此点击时需要滑动（左右）到下一张图片
请建议。Here's小提琴为相同。