0

hola muchachos cómo están? estoy tratando de implementar por primera vez esta plugin de javascript llamado "fullpage.js y resulta que he visto los tutoriales varios y trato de aplicarlo a mi pagina web sin obtener resultados positivos, alguno de ustedes puede orientarme acerca de por qué no funciona?

En el codigo esta el link para el css del fullpage, también esta agregado el link para js, y también esta agregada la estructura html de "section"

por acá dejaré el plugin: https://alvarotrigo.com/fullPage/

y su pagina de github: https://github.com/alvarotrigo/fullpage.js

muchas gracias

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Styles CSS -->
    <link rel="stylesheet" type="text/css" href="styles2.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.css" integrity="sha256-3IkGqGYOvq1Ype2MXFwVJFeBtBACgiveho3SacOEEP8=" crossorigin="anonymous" />

    <title>Hamster Web!</title>
  </head>
  <body>

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

        <div id="section1">
          <div class="card mb-3" style="max-width: auto; padding: 60px;">
            <div class="row no-gutters">
              <div class="col-md-4">
                <img id="photo" src="https://1.bp.blogspot.com/-7KHdebczOYg/XSiP7VRl_ZI/AAAAAAAAAFM/Lbs2aJH6JSUa_wqxMX-k4eVxKDv06IeEQCLcBGAs/s1600/12321321321.gif" class="card-img" alt="...">
              </div>
              <div class="col-md-8">
                <div class="card-body">
                  <h3 class="card-title">Hamster Philosophy</h3>
                  <p class="card-text"><p>Hello there! We created this game for you, for us and for everyone.</p><p> We are independent developers and this was an incredible adventure! </p><p>Fly for your life and please try to not to crush with any dead-mouse out there!</p><p> pd: the download button is just right down</p> <p>(BETA, try it for free) ↓ ;)</p>
                  <p class="card-text"><a href="https://mega.nz/#!ogIVBCpQ!Gi2JCDUa_ieavvOYQoj65gQmlKbA9BCu-0wQkUcaUho" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Download for Windows</a></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <div id="section2">
            <p><h3>Gameplay!</h3></p>
            <div class="embed-responsive embed-responsive-21by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/L2kSibl98ic" allowfullscreen></iframe>
            </div>
        </div>
      </div>

      <div class="section">
        <div id="section3">
            <div class="card mb-3" style="max-width: auto; padding: 60px;">
                <div class="row no-gutters">
                  <div class="col-md-4">
                    <img id="profile" src="https://i.imgur.com/H9w8Dju.png" class="card-img" alt="...">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h3 class="card-title">Hamster Philosophy</h3>
                      <p class="card-text"><p>Luis and Javier two students from Venezuela that decided to create a simple game.</p>

                      <p>Trying to getting better in the middle of a hard political and economic crysis.</p>

                      <p>If you want to support us please donate right here and thanks you for reading.</p>
                      <p class="card-text"><a href="https://www.paypal.me/aoshiblog/" class="btn btn-success" role="button" aria-pressed="true">Donate with Paypal</a></p>
                    </div>
                  </div>
                </div>
              </div>
          </div>

        <footer><small><p>Copyright 2019. Contact: [email protected]</p></small></footer>
      </div>
</div>



    <!-- Optional JavaScript -->
    <script>
        new fullpage('#fullpage', {
            autoScrolling:true,
          });

    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.js" integrity="sha256-e13jRNqOX98m6UAwI/yZTpcDseJtA8s86yfFs4Sqrv8=" crossorigin="anonymous"></script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>


#photo {
    width: 292px; height: 468px;
}

#section1 {
    background-color: #FFB2B2;
    text-align:center;
}

#section2 {
    background-color: #FFFACC;
    text-align:center;
}

#section3 {
    background-color: #A5D8D8;
    text-align:center;
}

#profile {
  width: 290px; height: 320px;
}

.card {
    background-color: transparent;
}

footer {
    text-align:center;
}
4
  • Considera por favor abrir la consola de tu navegador y verificar si en la pestaña console aparece algún error
    – user128299
    el 16 oct. 2019 a las 5:12
  • Exacto, tiene razón @LuisJoseLopezDelgado para eso nos han dejado los navegadores estas herramientas de desarrollo.
    – kmevi10
    el 16 oct. 2019 a las 5:19
  • Muchisimas gracias efectivamente la consola de chrome detectaba un problema el 16 oct. 2019 a las 5:20
  • Siempre considera tenerla abierta cuando desarrolles ahi te avisa lo que ocurre
    – user128299
    el 16 oct. 2019 a las 5:20

1 respuesta 1

1

Tu problema está en el orden en el que estás ejecutando los scripts. La parte de

<script>
        new fullpage('#fullpage', {
            autoScrolling:true,
          });

</script>

Debería ejecutarse luego de todas las importaciones que haces de scripts extras, ya que estas corren en secuencia, entonces lo que sucede es que al intentar ejecutar el código de fullpage al momento de su ejecución el código base de este no está cargado, es por eso que deberías ponerlo al final del todo, prueba con eso a ver qué tal.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.