Change the id of the bootstrap carousel

advertisements

i have carousel with width=300px and height=300px
I wanted to display modal and clone all carousel dom elements to view it larger
every thing is copied as i wanted.
but on clicking next prev buttons the older carousel moves not the one in modal I also changed id of new carousel and href inside new carousel but still new carousel is not scrolling on clicking 'next/prev or indicators'

$('#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);
});

this is jsfiddle link: https://jsfiddle.net/yo0gxtd9/


If you just want to make your carousel bigger, isn't it better to adjust width and height using for example some CSS class?

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;
    }

Please check the fiddle: https://jsfiddle.net/yo0gxtd9/3/