How can I create bootstrap carousel dynamically?

Question

I want to build carousel dynamically. here is my html code

<div id="mycarousel">
</div>

in javascript i am doing this;

var data='';
data='<div id="relatedItemCarousel"  class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000"  >';
        data=data+'<div class="carousel-inner" id="relatedItemCraousel1">'; 
//caraousel content
data='</div>'
data=data+'<a class="left carousel-control" id="related-item-carousel-control-left" href="#relatedItemCarousel" role="button" data-slide="prev" >'+
        '<i class="ion-ios-arrow-back size-32" ></i></a>'+            
    '<a class="right carousel-control" id="related-item-carousel-control-right" href="#relatedItemCaraousel" role="button" data-slide="next" >'+
        '<i class="ion-ios-arrow-forward size-32" ></i>'+
    '</a></div>';
  $('#mycarousel').html(data);

But it is not showing anything on page. Do I need to refresh carousel again?

Answer 1

I was working on the same problem and came up with this sort of kludgy solution.

Javascript:

function carouselMaker(myCarouselName, picArray){

<!-------------------- carousel indicators -------------------->
  var indicatorInnerHtml= "";
  for(var i=0 ; i< picArray.length ; i++) 
  {
      if(i==0){
        indicatorInnerHtml += "<li data-target=\"#"+myCarouselName+"\" data-slide-to=\"" + i +"\" class=\"active\"> </li>"; 
      }
      else{
        indicatorInnerHtml += "<li data-target=\"#"+myCarouselName+"\" data-slide-to=\"" + i +"\" class=\"\"> </li>"; 
      }       
  }  
  var indicatorsHtml = "<ol class=\"carousel-indicators\">" + indicatorInnerHtml + " </ol>";

<!---------------- carousel-inner --------------------------->
  var slidesInnerHtml = "";
  for(var i=0 ; i< picArray.length ; i++) 
  { 
      if(i==0){
        slidesInnerHtml += "<div class=\"item active\"><img src=\"" + picArray[i] + "\"><div class=\"carousel-caption\"></div>  </div>";
      }
      else{
        slidesInnerHtml += "<div class=\"item\"><img src=\"" + picArray[i] + "\"><div class=\"carousel-caption\"></div> </div>"; 
      }
  }  
  var slidesHtml = "<div class=\"carousel-inner\">" + slidesInnerHtml + "</div>";


<!---------------- carousel controls ----------------------->  
  var controlsHtml=  "" +
  "<a class=\"left carousel-control\" href=\"#" + myCarouselName + "\" data-slide=\"prev\">" + 
  "     <span class=\"glyphicon glyphicon-chevron-left\"></span>" +
  "</a> " +

   "<a class=\"right carousel-control\" href=\"#" + myCarouselName + "\" data-slide=\"next\">" +
   "    <span class=\"glyphicon glyphicon-chevron-right\"></span>" +
   " </a> ";   

  var innerCarousel = indicatorsHtml + slidesHtml + controlsHtml;

  document.getElementById(myCarouselName).innerHTML = innerCarousel;      
}

And when I want to insert a carousel somewhere on my page I do this on my PHP page:

<?php
$carouselName = "testCarousel";
$carouselPicList = "\"".$pictureTwo."\" , \"".$pictureThree."\" , \"".$pictureFour."\"";
?>

<div  id="<?php echo $carouselName ?>"  class="carousel slide" data-ride="carousel">

    <script type="text/javascript">
        carouselMaker("<?php echo $carouselName ?>", [<?php echo $carouselPicList ?>]);
    </script>

</div>  

Where $pictureNumber is the path of where my image is, i.e. $pictureOne = "img/firstImage.jpg"; This has the advantage of being able to create multiple carousels on the same page- something I wasn't able to find in any other example.

Can't help but feel the code is a bit hokey so if anyone has any suggestions I'd be glad to hear them.

Answer 2

Well, Bootstrap Carousel has various parameters to control.

i.e.

Interval: Specifies the delay (in milliseconds) between each slide.

pause: Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel.

wrap: Specifies whether the carousel should go through all slides continuously, or stop at the last slide

For your reference:

Fore more details please click here...

Hope this will help you :)

Note: this is for the further help.. I mean how can you customise or change default behaviour once carousel is loaded.

Answer 3

Well, we are assuming that we have an array of images:

So first of all we need to create a empty container in which slides will be inserted dynamically.

Add Below HTML code to conatiner where you want to append this.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators"></ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner"></div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

In above html code below are points to understand:

Class carousel inner is empty, there is where you gonna place your images for then carousel.

Class carousel-indicatiors is also empty, will be filled by JS.

Once you have added the html code insert below JavaScript code:

$(document).ready(function(){  
  for(var i=0 ; i< imageCollection.length ; i++) {
    $('<div class="item"><img src="'+imageCollection[i]+'"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
    $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')

  }
  $('.item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  $('#carousel-example-generic').carousel();
});

In above code imageCollection is basically the collection of image urls which you want to display in the carousel panel.

Basically, you append all your images to class carousel-inner, you add carousel control li's, then you add the active class to the first image and to the first carousel indicator li., and finally, you initialize your carousel.

Note that all this is inside a document ready function, but you can this anywhere you want.

Hope this will help you :)

Answer 4

$('mycarousel').html(data); should be $('#mycarousel').html(data);.

# is id selector in jQuery.