e.relatedTarget如何在jQuery中用于Bootstrap卡轮播？

Question

我是jQuery的初学者。我想制作转盘并在codepen.io（https://codepen.io/kreigd/pen/ybYNoN）上找到代码

我已经检查过html, CSS and jQuery，但是我不明白e.relatedTarget的工作原理。

我添加了一个警报方法，以检查$ e和idx的值。

$e的值为[object Object]，idx的值从1增加到5。

我的问题是：

1. idx为什么是1？ $e是对象，index()方法指示$e的位置。加载网页时选择了哪个元素？

2. idx的值不会超过5，但是代码中包含7张卡。为什么idx没有增加超过5？

3. 为什么$e和idx尽管没有包含在循环中，但它们却被一致地计算？

jQuery代码：

$(document).ready(function() {
  $("#myCarousel").on("slide.bs.carousel", function(e) {
    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $(".carousel-item").length;
    if (idx >= totalItems - (itemsPerSlide - 1)) {
      var it = itemsPerSlide - (totalItems - idx);
      for (var i = 0; i < it; i++) {
        // append slides to end
        if (e.direction == "left") {
          $(".carousel-item")
            .eq(i)
            .appendTo(".carousel-inner");
        } else {
          $(".carousel-item")
            .eq(0)
            .appendTo($(this).find(".carousel-inner"));
        }
      }
    }
  });
});