在弹出式窗口中滑动旋转木马

Question

当我将鼠标悬停在按钮上时，我试图在弹出式窗口中制作轮播，它可以正常显示，但单击箭头时不会滑动。

我上传了我正在此处测试的code作为参考。

$(function() {
  $('[data-toggle="popover"]').each(function(i, obj) {
    var popover_target = $(this).data('popover-target');
    $(this).popover({
      html: true,
      trigger: 'hover',
      container: '#' + $(this).attr('id'),
      placement: 'top',
      content: function(obj) {
        return $(popover_target).html();
      }
    }).on("mouseenter", function() {
      var _this = this;
      $(this).popover("show");
      // $(popover_target).toggleClass("none");
      $(this).siblings(".popover").on("mouseleave", function() {
        $(_this).popover("hide");
      });
    }).on("mouseleave", function() {
      var _this = this;
      setTimeout(function() {
        if (!$(".popover:hover").length) {
          $(_this).popover("hide")
        }
      }, 100);
    });
  });
});
var paginationHandler = function() {
  // store pagination container so we only select it once
  var $paginationContainer = $(".pagination-container"),
    $pagination = $paginationContainer.find('.pagination ul');
  // click event
  $pagination.find("li a").on('click.pageChange', function(e) {
    e.preventDefault();
    // get parent li's data-page attribute and current page
    var parentLiPage = $(this).parent('li').data("page"),
      currentPage = parseInt($(".pagination-container div[data-page]:visible").data('page')),
      numPages = $paginationContainer.find("div[data-page]").length;
    // make sure they aren't clicking the current page
    if (parseInt(parentLiPage) !== parseInt(currentPage)) {
      // hide the current page
      $paginationContainer.find("div[data-page]:visible").hide();
      if (parentLiPage === '+') {
        // next page
        $paginationContainer.find("div[data-page=" + (currentPage + 1 > numPages ? numPages : currentPage + 1) + "]").show();
      } else if (parentLiPage === '-') {
        // previous page
        $paginationContainer.find("div[data-page=" + (currentPage - 1 < 1 ? 1 : currentPage - 1) + "]").show();
      } else {
        // specific page
        $paginationContainer.find("div[data-page=" + parseInt(parentLiPage) + "]").show();
      }
    }
  });
};
$(document).ready(paginationHandler);

body {
  padding: 20px;
  text-align: left;
}

i {
  text-align: center;
  margin-top: 4px;
}

.material-icons {
  font-size: 16px;
  font-weight: bold;
}

.none {
  display: none;
}

div#content,
div#content2,
div#content3,
div#content4 {
  width: 250px;
  left: 79px;
  top: 22px;
  z-index: 10;
}

@media only screen and (max-width: 600px) {
  .navigation-menu {
    left: 50%;
    top: 2%;
    position: absolute;
  }
}

@media only screen and (min-width: 600px) {
  .navigation-menu {
    left: 50%;
    top: 2%;
    position: absolute;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="pagination-container">
    <div class="navigation-menu">
      <nav>
        <div class="pagination pagination-centered">
          <ul class="pagination justify-content-center">
            <li class="page-item" data-page="-">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
            <li class="page-item none" data-page="1">
              <a href="#" class="page-link py-2 px-3">1</a>
            </li>
            <li class="page-item none" data-page="2">
              <a href="#" class="page-link py-2 px-3">2</a>
            </li>
            <li class="page-item" data-page="+">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
    <div id="one" data-page="1">
      <div class="popover-block-container">
        <button type="button" style="padding:1px" id="slide" class="btn btn-primary" data-toggle="popover" data-popover-target="#content" rel="popover">
                 <i class="material-icons">B</i>
             </button>
        <div id="content" class="none">
          <div class="popover-body">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="images/img1.jpg" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="images/img1.jpg" alt="Second slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="images/img1.jpg" alt="Third slide">
                </div>
              </div>
              <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="two" data-page="2" class="none">
      <div class="popover-block-container">
        <button type="button" style="padding:1px" id="slide2" class="btn btn-primary" data-toggle="popover" data-popover-target="#content2">
                      <i class="material-icons">B+</i>
                  </button>
        <div id="content2" class="none">
          <div class="popover-body">
            <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <img class="d-block w-100" src="images/img1.jpg" alt="First slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="images/img1.jpg" alt="Second slide">
                </div>
                <div class="carousel-item">
                  <img class="d-block w-100" src="images/img1.jpg" alt="Third slide">
                </div>
              </div>
              <a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我必须通过导航箭头更改显示哪个按钮，并且每个按钮都有自己的滑块。如果可以的话，我将不胜感激。谢谢！