Пользовательская надпись 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>

Ответы на вопрос(1)

Ваш ответ на вопрос