生成縮略圖動態到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>

我現在用的是生成縮略圖動態到bxslider

bxslider

，並試圖動態生成的略圖圖像，並有確切的格式上面給出。

我的代碼：

   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);

但我的不工作，不顯示任何沒有圖像我如何放置後jQuery中的另一個HREF一個？

已經解決它

來源

2014-01-10 vini

你可能需要用'slider.reloadSlider（重載）;'其中滑塊jQuery滑塊對象。 – 2014-01-13 04:53:36

你能爲此創建一個小提琴嗎？ –

myObject從哪裏來？我只能猜測，如果我猜錯了解決方案將無法正常工作。 – Wayne

我創建搗鼓你http://jsfiddle.net/L5S2B/2/ 請檢查。它應該幫助你。如果這不是你想要的，可以隨時取回。

下面是從小提琴的代碼

的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>

來源

2014-01-13 05:10:39

嗨，感謝您的回答，但我所尋找的不是這個 - 所以他們是bxslider底部的縮略圖圖像，充當尋呼機，我希望能夠自定義這些圖像 – vini

對不起。我沒有理解你的問題是。你是什麼意思「我想能夠自定義這些圖像」 –

在bx-pager中給出的圖像http://bxslider.com/examples/thumbnail-pager-1 – vini

生成縮略圖動態到bxslider

回答

相關問題