jquery - 使用文本更改 Basic-Slider 作为数字以外的导航

Question

我正在寻找一个 slider ，它具有在导航中添加幻灯片名称而不是数字作为导航的功能

下面是简单的 jQuery Slider http://basic-slider.com/

如果有人能告诉我是否可以修改此 slider 以便我可以用幻灯片名称替换元素符号导航并具有相同的功能，我将不胜感激

幻灯片 1 幻灯片 2 幻灯片 3 幻灯片 4

OnMouse 悬停幻灯片应该更改为适当的幻灯片 & onMouse Click 它应该转到特定链接。

可以用 Nivo slider 做同样的事情

Answer 1

slider 导航使用文本标题，而不是数字:

  <ul class="bjqs">
      <li title="Slide 1"> ... </li>
      <li title="Slide 2"> ... </li>
      <li title="Slide 3"> ... </li>
  </ul>

Javascript 编辑第 478 行更改此

  var slidenum    = key + 1,

用这个:

  var slidenum    = $(slide).attr('title') === undefined ? key + 1 : $(slide).attr('title'),

点击和悬停功能:

Javascript 添加为第 56 行:

  captionUrlArray : [] //Url for each of the captions

Javascript 添加为第 488 行:

   var newUrl = settings.captionUrlArray[key];

Javascript 编辑第 495 行更改此

  marker.on('click','a',function(e){

为此:

  marker.on('mouseover','a',function(e){

*调用 slider 库时不要忘记设置 captionUrlArray!!! *

  $('#banner-slide').bjqs({
        animtype      : 'slide',
        height        : 320,
        width         : 620,
        responsive    : true,
        randomstart   : true,
        captionUrlArray: [ "http://google.com", "", "http://example.com" ]
      });

最终的工作脚本在这里: http://jsfiddle.net/dEsWp/4/