Пользовательская надпись Bxslider вне слайдера
Я пытаюсь переместить заголовки bxslider за пределы слайдера. Так как есть «переполнение: скрытый», я не могу сделать это только с помощью CSS.
Что я пытаюсь сделать:
<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>
Подписи, созданные с помощью этого кода:
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 создает это:
<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>