Title on horizontal navigation bar with dots in fu

问题:

I am designing website using fullpage.js. I want to give title to each dot in horizontal navigation bar.

function addSlidesNavigation(section, numSlides){
        section.append('<div class="fp-slidesNav"><ul></ul></div>');
        var nav = section.find('.fp-slidesNav');

        //top or bottom
        nav.addClass(options.slidesNavPosition);

        for(var i=0; i< numSlides; i++){
            nav.find('ul').append('<li><a href="#"><span></span></a></li>');
        }

        //centering it
        nav.css('margin-left', '-' + (nav.width()/2) + 'px');

        nav.find('li').first().find('a').addClass('active');
}

function call from :

if(options.slidesNavigation){
    addSlidesNavigation($(this), numSlides);
}

This function generates horizontal navigation bar. I want to add title for each. I am not getting how do I do it. Please help.

回答1:

I did it by following way.

In index page: horizontalNavigationToolTip = ['tooltip1','tooltip2'],

in jquery.fullpage.js:

function addSlidesNavigation(section, numSlides){
        section.append('<div class="fp-slidesNav"><ul></ul></div>');
        var nav = section.find('.fp-slidesNav');

        //top or bottom
        nav.addClass(options.slidesNavPosition);

        for(var i=0; i< numSlides; i++){
            //nav.find('ul').append('<li><a href="#" title="'+ tooltip[i] +'"><span></span></a></li>');

            // Only add tooltip if needed (defined by user)
            var tooltip = options.horizontalNavigationToolTip[i];

            var li = '<li><a class="tooltips" href="#"><span></span><div><img src="images/tooltip/'+ tooltip +'.png" /></span></div></a>';
            li += '</li>';

            nav.find('ul').append(li);
        }

        //centering it
        nav.css('margin-left', '-' + (nav.width()/2) + 'px');

        nav.find('li').first().find('a').addClass('active');
    }

hope this is helpful to others.