fullpage.js how to create slide custom image navigation dots?

问题

I am using fullPage.js fullpage slider in my project. but i need the customized image as navigation dots. I searched the fullPage documentation also. but i cant find out the solutions. Anybody know about this, Thanks in advance.

回答1:

You can use the menu option. You can create any kind of menu / nav with it and it will add the active class where it should.

From the documentation:

menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. Example:

Just use a class if you want to have multiple menus / navs.

menu: '.myNav'

Otherwise, you can also use the fullPage.js callbacks or the fullPage.js state classes to activate and desactivate the elements of any nav or menu.

Check this answer here.

回答2:

Use this code and it will solve your needs.

.fp-slidesNav ul li:hover a.active span{
    background-image:  url("../img/bullets.png");
    height: 22px;
    width: 22px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
}

This css code enable bullet images on your slider.

来源：https://stackoverflow.com/questions/43114281/fullpage-js-how-to-create-slide-custom-image-navigation-dots

标签

custom-controls