Título personalizado de Bxslider fuera del control deslizante
Estoy tratando de mover los subtítulos de bxslider fuera del control deslizante. Como hay "desbordamiento: oculto", no puedo hacerlo solo con CSS.
Lo que estoy tratando de hacer:
<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>
Subtítulos generados con 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 crea 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>