使用bxslider的高级字幕 [英] Advanced Captions with bxslider

问题描述

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

This question has already been asked, but has no answer - I believe because not enough information was provided.

我正在使用bxslider作为模板.看这里: http://bxslider.com/examples/image-slideshow-captions

I am using the bxslider as my template. See here: http://bxslider.com/examples/image-slideshow-captions

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

I can create a very simply caption using the "title" attribute, but I want to be able to create subtitles (with different attributes like smaller text) and I want to turn this into a link. I've tried implementing a div within the container, and perhaps obviously, I can't get that to sync with the slider without implementing it with jquery. I've also tried editing the CSS to no avail.

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

How can I add a caption that more than just an image title? Like a div overlaying the picture?

推荐答案

您甚至不需要使用bxslider提供的标题选项. 将标题添加为构成幻灯片的li标签的一部分.无论如何，这就是captions:true选项的作用，即，将具有bx-caption类的div附加到幻灯片中.

You don't even need to use the captions option provided by bxslider. Add the captions as part of the li tag that forms your slide. That's what the captions:true option does anyways, i.e appends the div with bx-caption class to your slide.

例如:

  <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来处理字体大小.

This way using css, you can play around with the font sizes too.

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

这篇关于使用bxslider的高级字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！