// ===== Instantiate Carousel ===== //
jQuery("#carousel").carousel();
// ===== Instantiate Carousel ===== //
jQuery("#carousel");neither work, I have read about getting the widget to instantiate, and I have a working tabs widget that uses the first method above (with the words tabs instead of carousel) - but that widget uses JQueryUI and the carousel one does not (this one is the W3C bootstrap carousel...
Here is a demo link to my code -- http://www.powerflexweb.com/widget_sites/active/full.php?format=carousel&color=light_blue_green&id_language=003001 -- if you load the page and check the console log, you can see that there are no errors and the data loads up, but yet, it is not showing on screen. Can anyone tell me what I am missing? I am really new to JQuery and am not sure what to do from here...
function searchCallback(data) {
if(debug_messages){console.log("json data loaded.");}
// ===== Inject UL tag ===== //
jQuery("#carousel").addClass( "carousel slide" ).attr('data-ride', 'carousel').append('<ul class="carousel-indicator">');
var ws_ftr = data.ws_ftr.records;
console.log(JSON.stringify(ws_ftr));
jQuery.each(ws_ftr, function(index, ftr) {
jQuery("#carousel>ul").append('<li data-target="carousel" data-slide-to="'+ftr[0]+'"></li>');
jQuery(".carousel li:first").addClass("active");
});
jQuery("#carousel>ul").after('<div class="carousel-inner">');
jQuery.each(ws_ftr, function(index, ftr) {
jQuery(".carousel-inner").append('<div class="carousel-item"><img src="img/features_sliding/' + ftr[3] + '" alt="feature - ' + ftr[2] + '"/>');
jQuery(".carousel-inner");
jQuery(".carousel-item li:first").addClass("active");
});
jQuery(".carousel-inner").after('<!-- Left and right controls --><a class="carousel-control-prev" href="#demo" data-slide="prev"><span class="carousel-control-prev-icon"></span></a><a class="carousel-control-next" href="#demo" data-slide="next"><span class="carousel-control-next-icon"></span></a>');
// ===== Instantiate Carousel ===== //
jQuery("#carousel").carousel();
};