同步克隆的旋转木马

Question

我有一个Bootstrap 4轮播，放在常规视图中。用户可以在模态中查看轮播。

模态中的轮播和常规视图中的轮播需要同步。因此，当一个旋转木马滑动时，另一个旋转木马也会滑动。 我试图克隆原始的旋转木马并将其附加到模态。

$(".carousel")
  .clone(true)
  .appendTo(".modal-body");

当我点击克隆转盘中的滑动按钮时，原始转盘会滑动，但克隆的转盘会停留在原始载玻片上。

我尝试使用Bootstrap slide event设置克隆的滑块活动幻灯片。这不知何故给出了一个javascript语法错误：正则表达式无效。

如何同步克隆的滑块并同时滑动两个轮播？

Codepen

Answer 1

您只需要重命名 <轮播 的 ID 和 href 元素html 你的旋转木马的孩子。

(function($) {
  $("#carouselExampleIndicators1")
    .clone(true)
    .attr('id', 'carouselExampleIndicators2')
    .appendTo(".modal-body")
    .carousel()
    .children()
    .attr('href', '#carouselExampleIndicators2');
})(jQuery);

ex：https://codepen.io/anon/pen/veZqGM