Image carousel slider not working bxSlider

Question

This is how my carousel shows up as

in my code ive included

<!-- bxSlider CSS file -->
        <link rel="stylesheet" href="<c:url value="/resources/css/jquery.bxslider.css" />" type="text/css" />
        <script type="text/javascript" language="javascript" src="<c:url value="/resources/js/jquery.js" />"></script>
        <!-- bxSlider Javascript file -->
        <script type="text/javascript" language="javascript" src="<c:url value="/resources/js/jquery.bxslider.js" />"></script>

Im dynamically inserting my images into the ul tag

<ul class="bxslider" id="img_carousel"/> 


                                     var img_data='data:image/jpeg;base64,' + base64Encode(data);
                     $("<li>", { html: '<img style="width:55px;height:55px" src="' + img_data + '"/>' }).appendTo("#img_carousel"); 

and after this im calling

  $('.bxslider').bxSlider();

this is how my html looks like

how do i fix this?

Answer 1

I can't say for sure, but it could be because the .bxSlider() function is running before the images are populated in the ul

My suggestion would be to try this:

setTimeout(function(){
    $('.bxslider').bxSlider();
},500);

of course, 500 could be too long, if it does work, I'd try bringing it down to 10 and going up until you get good performance. Also, timeout could be tricky when dealing with a really slow internet connection, like 3G or dialup, in which case you might need some more complicated code to know exactly when images are done loading.