Generate thumbnail images dynamically into bxslider

     <div id="bx-pager">
        <a data-slide-index="0" href=""><img src="/images/thumbs/tree_root.jpg" /></a>
        <a data-slide-index="1" href=""><img src="/images/thumbs/houses.jpg" /></a>
        <a data-slide-index="2" href=""><img src="/images/thumbs/hill_fence.jpg" /></a>
     </div>

I am using the

bxslider

and trying to generate the thumnail images dynamically and have the exact format as given above.

My Code:

                var container = document.getElementById('check');
                var divid = document.createElement('bx-pager');

                divid.id = 'bx-pager';


                for (var i = 0; i < Math.min(myObject.data.length, 10) ; i++) {
                    var friendItem = document.createElement('span');
                    var img = '<a data-slide-index="' + i + '" href=""><img src="' + myObject.data[i].pic_square + '"/></a>';

                    friendItem.innerHTML = img;
                    divid.appendChild(friendItem);
                }
                container.appendChild(divid);

But mine doesn't work and displays nothing no images how do i place the a href one after the another in jquery?

Have resolved it

Solution

I have created fiddle for you http://jsfiddle.net/L5S2B/2/ Please check this. It should help you. If this is not what you want feel free to get back.

Below is the code from fiddle

Javascript

// declare global
var slider_array = new Array();

jQuery(document).ready(function($){
    var htmlT = "";
    for( var i = 0; i <=2; ++i ) {
        htmlT += '<li><a href="/test'+i+'">Slide '+i+'</a></li>';
    }
    $('.bxslider').html(htmlT);
    // launch bxslider
    $('.bxslider').each(function(i){
        slider_array[i] = $(this).bxSlider({controls:false});
    });


    // bind controls on custom controls, and run functions on every slider
    $('.bxslider-controls a').bind('click', function(e) {
      e.preventDefault();

      if($(this).hasClass('pull-left')) {
        $.each(slider_array, function(i,elem){
          elem.goToPrevSlide();  
        });

      } else if($(this).hasClass('pull-right')) {
        $.each(slider_array, function(i,elem){
          elem.goToNextSlide();  
        });
      }

    });

});

HTML

<body>

    <!-- slider 1 -->
    <ul class="bxslider">
    </ul>

    <!-- custom controls -->
    <div class="bxslider-controls">
      <a class="pull-left" href="#">PREV</a>
      <a class="pull-right" href="#">NEXT</a>
    </div>

</body>