更改引导轮播 ID答案

【问题标题】：change bootstrap carousel id更改引导轮播 ID
【发布时间】：2016-11-28 13:05:56
【问题描述】：

我有 width=300px 和 height=300px 的轮播
我想显示模态并克隆所有轮播 dom 元素以放大查看它
一切都按照我的意愿复制。
但是在单击下一个上一个按钮时，较旧的轮播移动不是模态的我还更改了新轮播的id 和新轮播内的href，但单击“下一个/上一个或指示器”时新的轮播仍然没有滚动

$('#oldCarousel .item img').click(function(){
    var carousel = $(this).parents('#oldCarousel');
    carousel.attr('id','NewCarousel');
    carousel.find('a[href="#oldCarousel"]').attr('href','#NewCarousel');
    $('#myModal .modal-dialog').html(carousel.clone());
    //$('#myModal .modal-content,#myModal .item,#myModal .modal-dialog').css({'width':'95%','height':'95%','max-height':'95%'});
    $('#myModal .modal-dialog').css('padding','0px');
    $('#myModal').modal('show');
    $('#NewCarousel').carousel().carousel(0);
});

这是 jsfiddle 链接：https://jsfiddle.net/yo0gxtd9/

【问题讨论】：

您可以添加一个fiddle 并发布一些html吗？
jsfiddle.net/yo0gxtd9

标签： jquery navigation clone bootstrap-carousel

【解决方案1】：

如果你只是想让你的轮播更大，调整width和height使用一些CSS类不是更好吗？

JS：

var elements = $("#oldCarousel").add("#oldCarousel .item img");

$('#oldCarousel .item img').click(function(){
    elements.toggleClass("fullscreen");
});

CSS：

   .fullscreen {
      width: 100vw;
      height: 100vh;
    }

    img.fullscreen {
      min-width: 100vw;
      min-height: 100vh;
      width: auto;
      height: auto;
    }

请检查小提琴： https://jsfiddle.net/yo0gxtd9/3/

【讨论】：

这对我不起作用，因为我的轮播显示在页面的中心，即使我尝试了 fullscreen=absolute 但不适合在父级内部显示并损坏
全屏=绝对是什么意思？我不会将所有内容复制到另一个轮播 - 在我看来，这将是一个非常糟糕的方法。请尝试更新版本并告诉我有什么问题。

【解决方案2】：

以下是我注意到并在此处提供此解决方案的几个问题：

e.stopImmediatePropagation() - 当您单击图像时，您需要停止将事件冒泡到其父级，以便在单击 image 时不会滚动 carousel
carousel.clone() - 您正在更改 carousel 属性，这会影响原始属性，然后在插入 html 时使用 clone。这导致carousel 得到相同的attributes/id。所以你需要clonefirst and then change theattribute values`。

以下是您的代码的更新版本。

$('#oldCarousel .item img').click(function(e){
    e.stopImmediatePropagation(); //stops event being propagated to its parent
    var carousel = $(this).parents('#oldCarousel').clone(); //clone it and then change attributes
    carousel.attr('id','NewCarousel');
    carousel.find('a[href="#oldCarousel"]').attr('href','#NewCarousel');
    $('#myModal .modal-dialog').html(carousel); //attach the cloned version
    $('#myModal .modal-dialog').css('padding','0px');
    $('#myModal').modal('show');
    $('#NewCarousel').carousel().carousel(0);
});

Here's the Updated fiddle

【讨论】：