滑块外部的Bxslider自定义标题 [英] Bxslider custom caption outside of slider

问题描述

我正在尝试将bxslider字幕移到滑块之外.由于存在溢出:隐藏"，我不能仅靠CSS做到这一点.

I am trying to move bxslider captions outside of slider. Since there is "overflow: hidden" I can't do it with just 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>

使用以下代码生成的字幕:

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创建以下内容:

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>

推荐答案

我认为您想要这样的解决方案.摘录下方是bxslider字幕演示

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>

这篇关于滑块外部的Bxslider自定义标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！