JCarousel load <li> using JQuery

Question

I have a JCarousel which scrolls brands available in a store. The brand links, names and images I pull up from another page in the store (the CMS limits me accessing this data differently).

I am pulling the brand data and formatting a <li> entry and appending it to the JCarousel. And what ends up happening is the Carousel contains "placeholder <li>" and my appended ones in the list but always below view. The syntax of the <li> entries looks correct, but I cannot seem to load these in place of JCarousel created placeholders.

And after some research and trial and error, I am stuck so any help is appreciated.

My HTML / JS looks like this:

<div class="Block Moveable Panel" id="BrandsJCarousel">

    <link rel="stylesheet" type="text/css" href="/content/jcarousel.css">
    <script type="text/javascript" src="/content/jquery.jcarousel.min.js"></script>

    <div class=" jcarousel-skin-tango">
        <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
            <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
                <ul id="brands" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -850px; width: 1205px;">
                      **// LIST NEEDS TO APPEAR IN HERE**
                </ul>
            </div>
            <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
            <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
        </div>
        <script type="text/javascript">    
            $(document).ready(function() {
                $.ajax({url: "/brands"}).done(function ( data ) {
                    var html = $(data);
                    var items = $('.SubBrandListGrid li', html);
                    items.each(function() {
                        var link = $('a', this);
                        if(link){
                            var librand = "<li><a href=" + $(link).attr('href') + "><img src=" + $('img', this).attr('src') + " width='60' height='60' alt='" + $(link).text() + "'/></a></li>";
                            $("#brands").append(librand);
                        }                                
                    });                             
                });
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                jQuery('#brands').jcarousel({
                    auto: 10,
                    scroll: 8,
                    wrap: 'circular'
                });
            });
        </script>    

    </div>  
</div>

What actually loads into the list (from Chrome Inspect) is this:

<ul id="brands" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -644.80575px; width: 2565px;">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="1" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="2" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="3" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="4" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="5" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="6" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="7" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="8" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="9" style="float: left; list-style: none;"></li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" jcarouselindex="10" style="float: left; list-style: none;"></li>
<li><a href="/brands/ACBEL.html"><img src="/product_images/z/acbel__02930.jpg" width="60" height="60" alt="ACBEL"></a></li>
<li><a href="/brands/ACCESS.html"><img src="/product_images/c/access__56651.jpg" width="60" height="60" alt="ACCESS"></a></li>
<li><a href="/brands/ACER.html"><img src="/product_images/l/acer__42827.jpg" width="60" height="60" alt="ACER"></a></li>
<li><a href="/brands/ACTIVISION.html"><img src="/product_images/p/activision__33939.png" width="60" height="60" alt="ACTIVISION"></a></li>
</ul>

Answer 1

Normally I will do something like this:

Your Carousel:

<ul id="brands"></ul>

Your script:

  <script type="text/javascript">    
          $(document).ready(function() {
            $.ajax({
             url: "/brands",
             async:false,
             success : function(data){

             var html = $(data);
             var items = $('.SubBrandListGrid li', html);
             items.each(function() {
               var link = $('a', this);

                 if(link){
                   var librand = "<li><a href=" + $(link).attr('href') + "><img src=" + $('img', this).attr('src') + " width='60' height='60' alt='" + $(link).text() + "'/></a></li>";
                            $("#brands").append(librand);
                 }

             }

            $('#brands').jcarousel({
                auto: 10,
                scroll: 8,
                wrap: 'circular'
            });

         }

        });
     });
    </script>