fullpage.js comment créer diapositive ancres et faites défiler jusqu'à eux?

À l'aide de fullpage.js, comment puis-je créer des ancres pour les diapositives que s'opposer à la section des ancres qui sont définis dans les options.les ancres?

Dit la documentation à utiliser les points d'ancrage, mais sa ne fait rien avec la configuration suivante. Le <a> liens fonctionne normalement en sautant à la <div> avec l'id et il n'y a pas de défilement.

$(document).ready(function() {
    $('#fullpage').fullpage(); //initialization
});

<div id="fullpage">
    <div class="section">
        <div id="slide1" class="slide" data-anchor="slide1">slide1</div>
        <div id="slide2" class="slide" data-anchor="slide2">slide2</div>
    </div>
    <div class="section">
        <div id="slide3" class="slide" data-anchor="slide3">slide3</div>
        <div id="slide4" class="slide" data-anchor="slide4">slide4</div>
    </div>
</div>

<ul id="main-navi">
    <li><a href="#slide1">slide1</a></li>
    <li><a href="#slide2">slide2</a></li>
    <li><a href="#slide3">slide3</a></li>
    <li><a href="#slide4">slide4</a></li>
</ul>

OriginalL'auteur Jake | 2014-04-18

4

Il n'est pas expliqué pour la data-anchors section de la documentation, mais il est expliqué pour la anchors option.

Documentation dit:

ancres: (par défaut []) Définit l'ancre des liens (#exemple) pour être affiché sur l'URL pour chaque section. L'aide d'ancres en avant et en arrière de navigation sera également possible à travers le navigateur. Cette option permet également aux utilisateurs d'ajouter une section spécifique ou un diaporama. Être prudent! si vous utilisez des chevilles, ils ne peuvent pas avoir la même valeur que celle de tout élément ID sur le site (ou le NOM de l'élément pour IE).

Vous appliquez la même valeur pour votre data-anchorattribut que pour la id tag. C'est la raison pour laquelle il est en échec, et le défilement avec pas d'animation.
Certains navigateurs afficher automatiquement les éléments avec le même id ou nameattribut que le mot clé dans l'URL (#).

Il suffit de choisir une autre valeur pour votre data-anchor attributs ou de modifier les id pour chaque diapositive.

Je pense que la réponse est que fullpage.js ne prend pas en charge directe de l'ancre des liens vers des diapositives. Après beaucoup d'essais et d'erreurs, j'ai finalement compris que l'URL doit être de la forme domaine/n ° article/slide vous ne pouvez pas avoir domaine/#diapositive.
fullpage.js les soutenir, mais vous le faisiez dans le mauvais sens. Bien sûr, vous devez spécifier le nom de la section avant, sinon il pourrait y avoir des conflits entre les diapositives de différentes sections dans le cas de l'utilisation de la valeur par défaut anchorlink (1, 2...). De toute façon, comme je l'ai dit, votre problème est dans l'utilisation de id balises avec la même valeur que votre anchorlink.
Oui, c'est ce que je suis en train de dire qu'il ne supporte pas de domaine/#diapositive qui est décevant pour moi. Je ne peux pas le faire fonctionner, même sans l'id, une exigence que je connais déjà (+1).

OriginalL'auteur Alvaro

Je sais que le sujet est déjà 2 ans, j'ai affronté le même problème aujourd'hui et je suis tombé sur cet article. Maintenant que Ive a trouvé une solution, j'ai pensé qu'il serait agréable de partager avec vous les gars!

<div class="wrap">
    <nav class="nav">
        <ul>
            <li><a class="nav__item active" href="#">1</a></li>
            <li><a class="nav__item" href="#">2</a></li>
            <li><a class="nav__item" href="#">3</a></li>
            <li><a class="nav__item" href="#">4</a></li>
        </ul>
    </nav>
</div>

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

N'oubliez pas d'ajouter la classe active à la première ancre.

Et pour .js que je viens d'utiliser ce qui est déjà fourni avec le FullPage.js

$('#fullpage').fullpage({
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
      $('.nav__item.active').removeClass('active');
      $('.nav__item').eq(slideIndex).addClass('active');
    }
});

Et c'est tout!
Maintenant que vous avez votre propre diapositive de navigation 😉

Edit:

Je suppose que j'ai mal lu le problème ci-dessus, mais cela peut aussi être fixe:

<div class="wrap">
    <nav class="nav">
        <ul>
            <li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
            <li><a class="nav__item" href="#firstPage/slide2">2</a></li>
            <li><a class="nav__item" href="#firstPage/slide3">3</a></li>
            <li><a class="nav__item" href="#firstPage/slide4">4</a></li>
        </ul>
    </nav>
</div>

<div id="fullpage">
    <div class="section">
      <div class="slide" data-anchor="slide1"></div>
      <div class="slide" data-anchor="slide2"></div>
      <div class="slide" data-anchor="slide3"></div>
      <div class="slide" data-anchor="slide4"></div>
    </div>
</div>

 $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', thirdPage'],
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
      $('.nav__item.active').removeClass('active');
      $('.nav__item').eq(slideIndex).addClass('active');
    }
});

J'ai juste ajouté un tableau de points de contrôle (vous pouvez aussi lire ça dans le FullPage.js

Je ne sais pas si c'est la solution la plus propre, mais ça fonctionne 😉

OriginalL'auteur Taucherglocke

Vous devez vous connecter pour publier un commentaire.