Menu
I'm trying to add slides to Bootstrap carousel using jQuery but it is not acting as a slider in the browser. Instead it's showing the images in list view.
<!DOCTYPE html> <html> <head> <link href="Assets/css/bootstrap.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <script src="Assets/js/bootstrap.min.js"></script> <title></title> <script> onload=function(){ for(var m=3;m>=0;m--) { var path="file_uploads/"+m+".jpg"; $(".carousel-indicators").after("<li data-target='#carousel-example-generic' data-slide-to=\""+m+"\"></li>"); $(".carousel-inner").after("<div class='item'><img src='"+path+"' alt='"+m+"'></div>"); } $(".carousel-indicators li:first").addClass("active"); $(".carousel-inner .item:first").addClass("active"); $('.carousel').carousel(); } </script> </head> <body> <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> </body> </html> 
595
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.
Getting Started. The first thing we need to do to set up a Bootstrap Carousel is to ensure we have the proper dependencies. For this, we need Bootstrap, PopperJS, and jQuery.
Add scrolling images or text to your website with the Bootstrap carousel component. The Bootstrap carousel component enables you to add scrolling images and text that slide in, pause, then slide out. Controls enable the user to scroll forwards or backwards within the set.
First thing, I will rely on the fact that m is an array with proper url to your images.
The HTML should be like 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> 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.
Then, comes the JS: (as I said, Im relying on the fact that m is an array of imgs url)
$(document).ready(function(){ for(var i=0 ; i< m.length ; i++) { $('<div class="item"><img src="'+m[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(); }); 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, which is what you are missing. What you do is only define a function called onload
Hope it helps !
EDIT: I saw that you are outputting also alt tag to images, but thats something that not need to be on my answer, I bet you can do that without problems.
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
