Question

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

的功能

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

如果有人可以告诉我是否可以修改此滑块以便我可以使用幻灯片名称替换子弹导航并具有相同的功能，我将不胜感激

Slide 1 Slide 2 Slide 3 Slide 4

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

可以使用Nivo滑块完成

Answer 1

滑块导航使用文字标题，而不是数字：

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

* 调用滑块库时不要忘记设置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/

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

1 个答案: