滑块外的Bxslider自定义标题

我试图在滑块外移动bxslider标题。 由于存在“溢出：隐藏”，我不能只用css来做。

我想做什么：

 // I need display captions here 
 
 
  

使用此代码生成的标题：

 var appendCaptions = function(){ // cycle through each child slider.children.each(function(index){ // get the image title attribute var title = $(this).find('img:first').attr('title'); // append the caption if (title != undefined && ('' + title).length) { $("this").append('
' + title + '
'); } }); } 

Bxslider创建：

 
 
 
 
  
Caption 1
 // I need to move caption outside of slider (bx-wrapper) 
 
 
  

Answer 1

我想你想要这样的解决方案。 下面的片段是bxslider标题演示

 jQuery('.bxslider').bxSlider({ nextSelector: '#slider-next', prevSelector: '#slider-prev', nextText: 'next', prevText: 'prev', pager: true, prependtxt: 'Examples ', pagerType: 'short', mode: 'fade', auto: true, onSliderLoad: function(currentIndex) { $(".slider-txt").html($('.bxslider li').eq(currentIndex).find("img").attr("title")); }, onSlideBefore: function($slideElement, oldIndex, newIndex) { $(".slider-txt").html($slideElement.find("img").attr("title")); } }); 

 .slider-txt { color: red; }