Nivo slider - replacing the bullet text 1,2,3 with words

Question

I am using the Nivo slider on my site and wondered if it was possible to change the numbered bullet points (i.e. 1,2,3) to words by changing the javascript / adding some css?

I think it has something to do with this part of the code...

// Add Control nav
    if(settings.controlNav){
        vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
        slider.after(vars.controlNavEl);
        for(var i = 0; i < kids.length; i++){
            if(settings.controlNavThumbs){
                vars.controlNavEl.addClass('nivo-thumbs-enabled');
                var child = kids.eq(i);
                if(!child.is('img')){
                    child = child.find('img:first');
                }
                if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
            } else {
                vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
            }
        }

It would be great if i could have the words and style them using css.

I'm using the controlNav as buttons instead of bullets.

Please let me know if you need more info.

Thanks - really hoping someone can help me on this!

score 1 · Answer 1 · edited May 23 '17 at 11:57

You could consider using CSS selectors to target the anchor by its rel attribute (which, for these anchors, appears to be the numeric one-based index). See CSS - style a link based on its "rel" attribute? for details on this topic.

An example of how you could achieve this using purely CSS would be:

a.nivo-control[rel='1'] { content: 'One!'; }

Of course, for this to work, you'd need to know in advance approximately how many slides you have.

If you prefer jQuery (which you already have since it's a prerequisite for using Nivo), you could do something like:

jQuery("a.nivo-control[rel='1']").html("One!");

(edit: The rationale here is that, rather than having to alter the base code for Nivo Slider, you can come by after the fact and make this modification; thus, when you update the plugin in the future your changes will hopefully work out of the box.)

myfunkyside · Accepted Answer · 2014-05-24T19:37:02.800

I'm not familiar with the Nivo slider, but from what I can tell, the text is created in your last line of code:

vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');

this to be exact: >'+ (i + 1) +'<

In order to create text instead of a number, you would have to create this inside your else-clause:

    //REST OF YOUR CODE...
} else {
    var bulletText = '';
    switch (i) {
        case 0: bulletText='one'; break; //change this value to your desired word
        case 1: bulletText='two'; break;
        case 2: bulletText='three'; break;
        //etc...
        default: alert('bullet does not exist: '+i);
    }
    vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><span class="bulletTxt">'+bulletText+'</span></a>');
}

In your CSS, you can style the text by adding

.bulletTxt {
    //css rules here...
}

Only problem (maybe) is that the switch could be a long list, depending on how many bullet points there are.

Nivo slider - replacing the bullet text 1,2,3 with words

2 Answers2