同步克隆的轮播

Question

我有一个放在常规视图中的Bootstrap 4旋转木马。用户能够在模式中查看轮播。

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

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

当我点击克隆的旋转木马中的滑动按钮时，原始的旋转木马会滑动，但克隆的旋转木马会停留在原始幻灯片上。

我已尝试使用Bootstrap slide event将克隆的滑块设置为活动幻灯片。这以某种方式给出了一个javascript语法错误:无效的正则表达式。

如何同步复制的滑块并同时滑动两个旋转木马？

Codepen

Answer 1

您只需从元素html A of You carousel中重命名您的carousel的子项id和href即可。

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

例如：https://codepen.io/anon/pen/veZqGM