Эффект слайда Fullpage js?

Я пытаюсь использовать Fullpage.js. Вот мой скрипт:

<div id="fullpage" style="margin-top: 55px">
    <div class="section" id="first" style="background-color: red">Some section - Home</div>
    <div class="section" id="services" style="background-color: blue">Some section - Services</div>
    <div class="section" id="why" style="background-color: green">Some section - Why</div>
    <div class="section" id="portofolio" style="background-color: red">Some section - Portofolio</div>
    <div class="section" id="price" style="background-color: blue">Some section - Price</div>
</div>

<script type="text/javascript">
   $(document).ready(function() {

$('#fullpage').fullpage({
    menu: '#navbarNav',
    css3: true,
    scrollingSpeed: 1000
});
});
</script>

проблема в том, что на моей HTML-странице нет эффекта слайда. Какие решения? Я не вижу никаких ошибок в консоли браузера.

обновление

есть вторая проблема, когда я прокручиваю случайный раздел, затем я нажимаю меню, якорь не работает, я имею в виду, что он остается в разделе, который я прокручиваю.

10
bootstrap-4 css fullpage.js html

3 ответов

вам нужно определить свои якоря в вашем скрипте, например:

$(document).ready(function() {
    $('#fullpage').fullpage({
        menu: '#navbarNav',
        css3: true,
        scrollingSpeed: 1000,
        anchors:['first, 'secondPage', 'why', 'portofolio', 'price']
    });
};

источник:https://github.com/alvarotrigo/fullPage.js#fullpagejs

3

пожалуйста, не могли бы вы вставить свой код javascript внутри $(документ).ready () чтобы быть уверенным, что он готов к выполнению. В вашем случае, это должно быть что-то вроде:

    <script type="text/javascript">
       $(document).ready(function() {
          $('#fullpage').fullpage({
             menu: '#navbarNav',
             css3: true,
             scrollingSpeed: 1000
         });
      };
   </script>

надеюсь, что это может решить вашу проблему. Спасибо

2

вам нужно написать идентификатор в атрибуте привязки href следующим образом

<ul id=#menu> 
   <li data-menuanchor="first" class="active">
   <a href="#first">First</a>
    </li>
    <li data-menuanchor="services" class="active">
   <a href="#services">Services</a>
   </li>
</ul>
1