Как можно задать свой стиль навигационных точек fp-nav для определенных блоков page1 и page2 в Fullpage?

Как настроить разный цвет навигационных точек для различных страниц, используя плагин Fullpage.js?
  • 23 июня 2024 г. 6:11
Ответы на вопрос 2
Для задания своего стиля навигационных точек fp-nav для определенных блоков page1 и page2 в Fullpage, можно использовать CSS селекторы и классы. 

Например, если у вас уже есть стили для навигационных точек в общем случае, вы можете добавить классы для навигационных точек, соответствующие блокам page1 и page2. Затем определить стили для этих классов в вашем CSS.

Пример CSS:

```css
.fp-nav {
   /* общие стили для навигационных точек */
}

.fp-nav.page1 {
   background-color: red; /* стиль для навигационных точек на странице page1 */
}

.fp-nav.page2 {
   background-color: blue; /* стиль для навигационных точек на странице page2 */
}
```

Чтобы настроить разный цвет навигационных точек для различных страниц, можно использовать callback функцию после инициализации Fullpage.js и изменить стили навигационных точек в зависимости от текущей страницы.

Пример использования callback функции:

```javascript
new fullpage('#fullpage', {
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
  afterLoad: function(origin, destination, direction){
    var activeSection = destination.item;
    if(activeSection.classList.contains('page1')){
        document.querySelector('.fp-nav').style.backgroundColor = 'red';
    } else if(activeSection.classList.contains('page2')){
        document.querySelector('.fp-nav').style.backgroundColor = 'blue';
    }
  }
});
```

Этот код меняет цвет навигационных точек в зависимости от того, на какой странице пользователь находится. Вам нужно будет приспособить его к вашим стилям и разметке страницы.
За одно обновил версию до самой новой. 
Решение: https://codepen.io/AXOT/pen/xxNjRmW
Похожие вопросы