使用bxslider的高级字幕

Question

这个问题已被提出,但没有答案 - 我相信因为没有提供足够的信息.

我使用bxslider作为我的模板.请参见此处:http: //bxslider.com/examples/image-slideshow-captions

我可以使用"title"属性创建一个非常简单的标题,但我希望能够创建字幕(具有不同的属性,如较小的文本),我想将其转换为链接.我已经尝试在容器中实现一个div,显然,我不能让它与滑块同步而不用jquery实现它.我也试过编辑CSS无济于事.

如何添加不仅仅是图像标题的标题？就像一个覆盖图片的div？

Answer 1

您甚至不需要使用bxslider提供的标题选项.将标题添加为构成幻灯片的li标记的一部分.这就是字幕:真正的选项无论如何都要做,即将带有bx-caption类的div附加到幻灯片中.

例如:

  <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="caption1"> 
        <span>Image 1</span>
        <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
      </div>
 </li>

这样使用css,你也可以使用字体大小.

这是小提琴http://jsfiddle.net/s2L9P/