我有4个部分,使用fullPage js构建,第3部分依次有4个幻灯片。即使是垂直滚动,我在幻灯片上使用水平导航,因此我的导航结果如图所示
如果在幻灯片部分点击我的菜单上的链接,我想向左移动到第一张幻灯片,然后根据点击的部分链接向上或向下移动。
我知道moveTo()
可用于移动到任何部分或幻灯片,所以我连续两次使用它。我不能让它正常工作。
onLeave
选项的代码用于水平滚动,而afterSlideLoad
的代码用于左移动转到第一张幻灯片然后向上或向下。
任何人都有任何想法?
链接到网站:https://rimildeyjsr.github.io/spotify-circle-animation
HTML(菜单):
<ul id="menu">
<li class="menu-link" data-menuanchor="home"><a href="#home">Home</a></li>
<li class="menu-link" data-menuanchor="about"><a href="#about">About</a></li>
<li class="menu-link" data-menuanchor="projects"><a href="#projects">Projects</a></li>
<li class="menu-link" data-menuanchor="contact"><a href="#contact">Contact</a></li>
</ul>
jQuery的:
var slideIndex = 1, sliding = false, slideLinkClick = false, link;
$('#fullpage').fullpage({
anchors: ['home','about','projects','contact'],
loopHorizontal: false,
fixedElements: '#toggle,#overlay',
slidesNavigation: true,
menu: '#menu',
controlArrows: false,
slidesNavPosition: 'bottom',
recordHistory: false,
onLeave: function(index, nextIndex, direction) {
if (index == 3 && !sliding) {
if (direction == 'down' && slideIndex < 4) {
sliding = true;
$.fn.fullpage.moveSlideRight();
slideIndex++;
return false;
} else if (direction == 'up' && slideIndex > 1) {
sliding = true;
$.fn.fullpage.moveSlideLeft();
slideIndex--;
return false;
}
} else if (sliding) {
return false;
}
},
afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
sliding = false;
$('.menu-link').on('click', function(){
link = $(this).attr('data-menuanchor');
link= "'"+link+"'";
console.log(link);
$.fn.fullpage.moveTo('projects',0);
slideLinkClick = true;
});
if(index === 3 && slideIndex === 0 && slideLinkClick === true) {
console.log(link);
$.fn.fullpage.moveTo(link);
slideLinkClick = false;
console.log(slideLinkClick);
}
}
});