Legenda personalizada Bxslider fora do controle deslizante
Estou tentando mover as legendas bxslider para fora do slider. Como existe "overflow: hidden", não posso fazer isso apenas com css.
O que estou tentando fazer:
<div class="captions"></div> // I need display captions here
<ul>
<li><img src="images/1.jpg" title="Caption 1"></li>
<li><img src="images/2.jpg" title="Caption 2></li>
</ul>
Legendas geradas com este código:
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('<div class="bx-caption"><span>' + title + '</span></div>');
}
});
}
Bxslider cria que:
<div class="bx-wrapper">
<div class="bx-viewport">
<ul>
<li>
<img src="images/1.jpg" title="Caption 1">
<div class="bx-caption"><span>Caption 1</span></div> // I need to move caption outside of slider (bx-wrapper)
</li>
</ul>
</div>
</div>