jquery - Bxslider custom caption outside of slider

Question

I am trying to move bxslider captions outside of slider. Since there is "overflow: hidden" I can't do it with just css.

What I am trying to do:

<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>

Captions generated with this code:

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 creates that:

<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>

Answer 1

I think you want solution like this. below snippet is bxslider caption demo

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>

<div class="image-slider">
  <ul class="bxslider">
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Letterhead" title="Letterhead" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Business Card" title="Business Card" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Compliment Slip" title="Compliment Slip" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Envelope" title="Envelope" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Folder" title="Folder" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Referral Card" title="Referral Card" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Single Sided Referral Pad" title="Single Sided Referral Pad" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Post, note or thank you card" title="Post, note or thank you card" />
    </li>
    <li>
      <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="WEBSITE (OPTIONAL)" title="WEBSITE (OPTIONAL)" />
    </li>
  </ul>
  <div class="outside"><span id="slider-prev"></span><span id="slider-next"></span>
  </div>
  <div class="slider-txt"></div>
</div>