Using fullpage.js, how can I create anchors for slides as oppose to section anchors that are defined in the options.anchors?
The documentation says to use data-anchors but its not doing anything with the following setup. The <a>
links just works normally by jumping to the <div>
with the id and there is no scrolling.
$(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>
It is not explained for the
data-anchors
section in the documentation, but it is explained for theanchors
option.Documentation says:
You are applying the same value for your
data-anchor
attribute than for theid
tag. That's the reason why it is failing and scrolling with no animation. Some browsers automatically scroll to elements with the sameid
orname
attribute than the hashtag in the URL (#).Just choose another value for your
data-anchor
attributes or change theid
for each slide.I know the topic is already 2 years old yet I faced the very same problem today and stumbled upon this article. Now that I´ve found a solution I thought it would be nice to share it with you guys!
Don´t forget to add the active class to the first anchor.
And for .js I just used what already comes along with the FullPage.js
And that´s it! Now you have your very own slide navigation ;-)
Edit:
I guess I have misread the problem above but this also can be fixed:
I just added an array of anchors (you can also read this up in the FullPage.js
I don´t know if this is the cleanest solution but it works ;)