JS：fullpage.js moveTo（）在不同的部分之间

Question

CONTEXT:

I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements.

PROBLEM:

The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!

My JS:

$(document).ready(function() {


  // move to quality
  $( "#q" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 1);
  });

  $( "#d" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 2);
  });

  $( "#p" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 3);
  });

  $( "#z" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 4);
  });

  $( "#e" ).click(function() {
      $.fn.fullpage.silentMoveTo('why', 5);
  });


  });


  $('#fullpage').fullpage({
      css3: true,
      sectionsColor: ['white', 'grey', '#fff', '#fff'],
      anchors:['m', 'why',],
      navigation: true,
      navigationPosition: 'right',
      // verticalCentered:false
      // 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
      // 'showActiveTooltip': true,

    }

  );

My Html:

<div id="fullpage" class="fullpage-wrapper">



  <div class="section" id="section1">
    <div class="slide" id="slide1-1">
    </div>   <!-- End slide -->
  </div>


  <!-- Start section 2 - why  -->

  <div class="section" id="section2">

    <div class="slide" id="slide2-1"> <!-- Start Why  -->
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">
                <h2 class="master-side side-default"><span>Why ?</span></h2>
                <div class="col-md-8 col-center">
                    <a id="q" class="square img-thumbnail"> </a>
                    <a id="d" class="square"> </a>
                    <a id="p" class="square"> </a>
                    <a id="d" class="square"> </a>
                    <a id="e" class="square"> </a>
                </div>

            </div> <!-- End col-md-12 -->
          </div> <!-- End Row -->

        </div>   <!-- End Container -->
      </div> <!-- End  Why  -->

      <div class="slide" id="slide2-2"> <!-- Start Quality -->
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12">
                  <h2><span>Quality</span></h2>
                  <div class="col-md-8 col-center">
                      <a id="q" class="square img-thumbnail"> </a>
                      <a id="d" class="square"> </a>
                      <a id="p" class="square"> </a>
                      <a id="d" class="square"> </a>
                      <a id="e" class="square"> </a>
                  </div>
              </div> <!-- End col-md-12 -->
            </div> <!-- End Row -->

          </div>   <!-- End Container -->
        </div> <!-- End Quality -->

Answer 1

Don't you get any errors in your javascript console?

In the code you posted there's a mistake here:

  // move to quality
  $( "#q").click(function() {
      $.fn.fullpage.silentMoveTo('why', 1);
  });

You forgot to close the string "#q" .

Also, you can not have more than one id element with the same value... You can not have two <a id="d" class="square"> </a> like you do now.

If that's not the problem, you should add a reproduction of the issue online, because otherwise nobody will be able to know where the problem is and therefore how to help you.