CODEWITHSUNDEEP
jqueryhtmlcssslidernivo-slider
Learning
Learning

Reputation: 20001

Change Basic-Slider with text as navigation other than numbers

I am looking for a slider which has a feature to add slide name in navigation rather than Numbers as Navigation

Below is simple jQuery Slider http://basic-slider.com/

I would appreciate if some can tell me if i can modify this slider so that i can replace bullets nav with Slide Name and have the same functionality

Slide 1 Slide 2 Slide 3 Slide 4

OnMouse hover slide should change to appropriate slide & onMouse Click it should go to a particular link.

Can same be done with Nivo slider

Upvotes: 0

Views: 2412

Answers (1)

Zsolt Tolvaly
Zsolt Tolvaly

Reputation: 3616

Slider navigation use of text caption, not number:

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

Javascript edit row #478 change this

  var slidenum    = key + 1,

with this:

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

Click and hover functionallity:

Javascript add as row #56:

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

Javascript add as row #488:

   var newUrl = settings.captionUrlArray[key];

Javascript edit row #495 change this

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

to this:

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

*Do not forget to set captionUrlArray when calling the slider library!!! *

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

The final working script is here: http://jsfiddle.net/dEsWp/4/

Upvotes: 2

Related Questions