可滑动的figcaptions

Question

我正在玩编码并试图使FIGCAPTION可以滑动但是当我将功能添加到以下HTML时，它不起作用。

但是，当只有<div> id="container"及其中的代码时，它似乎有效。

有没有办法让下面的脚本与FIGCAPTION一起使用？

<div>
  <h2 id="Books" class="heading"> Books</h2>
  <div class="w-row">
    <div class="column-3 w-col w-col-3 w-col-small-6 w-col-tiny-tiny-stack">
      <figure class="imghvr-fall-away-vert">
        <img src="images/hg.jpg" srcset="images/hg-p-500.jpg 500w, images/hg-p-800.jpg 800w, images/hg-p-1080.jpg 1080w, images/hg-p-1600.jpg 1600w, images/hg-p-2000.jpg 2000w, images/hg-p-2600.jpg 2600w, images/hg.jpg 2628w" sizes="100vw" >
        <figcaption>
          <div id="container">
            <div class="buddy" style="display: block;">
              <div class="avatar"  style="display: block; background-image: url(images/Untitled-1.jpg)"></div>
            </div>
            <div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-2.jpg)"></div></div>  
            <div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-3.jpg)"></div></div>  
            <div class="buddy"><div class="avatar" style="display: block; background-image: url(images/Untitled-4.jpg)"></div></div>  
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

脚本：

$(document).ready(function(){

  $(".buddy").on("swiperight",function(){
    $(this).addClass('rotate-left').delay(700).fadeOut(1);
    $('.buddy').find('.status').remove();

    $(this).append('<div class="status like">Like!</div>');      
    if ( $(this).is(':last-child') ) {
      $('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
    } else {
      $(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
    }
  });  

  $(".buddy").on("swipeleft",function(){
    $(this).addClass('rotate-right').delay(700).fadeOut(1);
    $('.buddy').find('.status').remove();
    $(this).append('<div class="status dislike">Dislike!</div>');

    if ( $(this).is(':last-child') ) {
      $('.buddy:nth-child(1)').removeClass ('rotate-left rotate-right').fadeIn(300);
      alert('OUPS');
    } else {
      $(this).next().removeClass('rotate-left rotate-right').fadeIn(400);
    } 
  });
});