4

使用fullpage.js，如何为幻灯片创建锚点，而不是在 options.anchors 中定义的部分锚点？

文档说要使用数据锚，但它对以下设置没有做任何事情。<a>通过跳转到带有 id的链接正常工作<div>，并且没有滚动。

$(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>
4

2 回答 2

4

文档中的部分没有解释data-anchors，但对anchors选项进行了解释。

文档说：

锚点：（默认 []）定义要在每个部分的 URL 上显示的锚链接（#example）。也可以通过浏览器使用锚点向前和向后导航。此选项还允许用户为特定部分或幻灯片添加书签。当心！如果您使用锚点，它们的值不能与站点上的任何 ID 元素（或 IE 的 NAME 元素）具有相同的值。

您为data-anchor属性应用与id标签相同的值。这就是为什么它失败并且没有动画滚动的原因。某些浏览器会自动滚动到与URL (#) 中的主题标签具有相同id或属性的元素。name

只需为您的属性选择另一个值data-anchor或更改id每张幻灯片的值。

于 2014-04-20T12:05:47.440 回答
2

我知道这个话题已经 2 岁了，但我今天遇到了同样的问题，偶然发现了这篇文章。现在我已经找到了一个解决方案，我认为很高兴与你们分享！

<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>

不要忘记将活动类添加到第一个锚点。

对于 .js，我只是使用了 FullPage.js 已经附带的东西

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

就是这样！现在您有了自己的幻灯片导航；-)

编辑：

我想我误读了上面的问题，但这也可以解决：

<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');
    }
});

我刚刚添加了一组锚点（您也可以在FullPage.js中阅读此内容

我不知道这是否是最干净的解决方案，但它有效；）

于 2016-06-22T11:34:56.807 回答