Question

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

Answer 1

文档中的data-anchors部分未对其进行说明，但针对anchors选项进行了解释。

文档说：

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

您为data-anchor属性应用的值与id标记的值相同。这就是它失败和滚动没有动画的原因。某些浏览器会自动滚动到与网址（＃）中的主题标签具有相同id或name属性的元素。

只需为data-anchor属性选择其他值，或更改每张幻灯片的id。

Answer 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

中阅读此内容

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

fullpage.js如何创建幻灯片锚并滚动到它们？

2 个答案: