Carousel widget works, but not appearing in browser...

Carousel widget works, but not appearing in browser...

I have created a working widget, but I do not know how to instantiate the code to run on the page (it looks great in view source when I save the page). I have tried...
  1. // ===== 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...

  1. 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();

    };