Javascript bxSlider加载动态拇指

我对bxSlider有一个问题，我用我数据库中的数据动态加载我的滑块和拇指，滑块和拇指都是加载的，但我希望当我们单击拇指时，我们转到项目的滑块，但我可以做到这一点。 我想知道你是否有想法：

加载滑块和拇指

$.ajax({
       url: urlsite + 'ajax/portfolio.php',
       type:'POST',
       data:'ordre='+ ordre_next_slide,
       dataType: "json"
   }).done(function (data) {


   if(data){


       var id = data['id_realisation'];
       var libelle = data['libelle'];
       var description = data['description'];
       var lien = data['lien'];
       var lien_lib = data['libelle_url'];
       var background = data['background'];
       var slug = data['slug'];
       var ordre = data['ordre'] ;
       var type_visuel = data['typeV'];
       var type_autre = data['imac'];
       var thumb_background = data['url_thumb_back'];
       var htmlT = '';
       var html = '';
       var position = ordre;
       position++;

       html += "<!-- PROJET  | START -->";
       html += "<li id='s"+id+"' class='site site-"+slug+"' data-position='"+position+"'> ";
       html +=   "<div class='container'>";
       html +=      "<div class='caption-img'>";
       if(type_visuel == "responsive"){
       html +=         "<div class='device device-ipad'></div>";
       html +=            "<div class='device device-iphone'></div>";
       }else {

           if(type_autre == 0){
               html +=            "<div class='device device-else'></div>";
           }else{
               html +=            "<div class='device device-imac'></div>";
           }
       }
       html +=            "</div>";
       html +=            "<div class='caption-text'>";
       html +=               "<h2>"+ libelle + "</h2>";
       html +=               "<p class='trunk-3'>"+ description +"</p>";
       html +=               "<br>";
       html +=               "<a href='"+ lien +"' class='btn btn-primary'>"+ lien_lib +"</a>";
       html +=            "</div>";
       html +=       "</div>";
       html +=   "</li>";

       $('#s'+id_first_slider+'').append(html);

       htmlT+="<div class='thumb choise' id='thumb"+id+"' data-position='"+position+"'>";
       htmlT+="<a class='bx-pager-link active'  href='#'>";
           htmlT+="<img src='"+thumb_background+"'>";
           htmlT+="<div class='caption'>";
               htmlT+="<p>" + libelle + "</p>";
           htmlT+="</div>";
       htmlT+="</a>";

       htmlT+="</div>";

       $('#thumbs').append(htmlT);

       loadNextSlider(id_first_slider, ordre);

   }else{
       init(); 
       }

   });

portfolioSlider（）：

对不起，我英语不好，我是法国人

谢谢你的帮助

function init(){

$("head").append(
    $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:urlsite  + 'style/portfolio-slider.css?r='+Math.random()})
); 
portfolioSlider();

$(".test_slide_none").animate({
    "opacity":"1"
},1000);

secondNav();
customScroll();
findSlide();
bottomNav();

$("#navbar-main").animate({
    "opacity":"1"
},1000);
}

function portfolioSlider(){

var portfolioSlider = $('.bxslider').bxSlider({
    auto:false,
    pager:false,
    prevText:"",
    nextText:"",
    controls:true,
    autoReload:true,
    infiniteLoop: false,
    onSliderLoad: function(currentIndex){
        setTimeout(function(){
           reveal();
        }, 1000);
    }
});

return portfolioSlider;
}