change bootstrap carousel id

Question

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/

Could you possibly add a `fiddle` and post some html? – Guruprasad J Rao Nov 28 '16 at 13:11 — Guruprasad J Rao, Nov 28 '16 at 13:11
https://jsfiddle.net/yo0gxtd9/ – alamnaryab Nov 28 '16 at 14:04 — alamnaryab, Nov 28 '16 at 14:04

luke · Answer 1 · 2016-11-28T15:13:13.957

0

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/

edited Nov 28 '16 at 15:13

answered Nov 28 '16 at 14:32

luke

3,531
1
26
46

this is not working for me, as my carousel is displayed at centered of page even i tried fullscreen=absolute but not gets fit showing inside parent and broken – alamnaryab Nov 28 '16 at 15:02
What do you mean by fullscreen=absolute? I'm not copying all the contents to another carousel - in my opinion it would be a very bad approach. Please, try updated version and tell me what is broken. – luke Nov 28 '16 at 15:14

score 0 · Answer 2 · answered Nov 29 '16 at 05:36

Below are few issue I've noted and providing this solution here:

e.stopImmediatePropagation() - You need to stop the event bubbling to its parent when you click on an image, so that the carousel is not rolled when you click on image
carousel.clone() - You were changing carousel attributes, which effected original one and then while inserting html you where using clone. This resulted both the carousel being getting same attributes/id. So you need to clonefirst and then change theattribute values`.

Below is the updated version of your code.

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

change bootstrap carousel id

2 Answers2