Question

上下文/问题

我有一个包含6张幻灯片的fullpage.js部分。第一张幻灯片是其他5张幻灯片的索引。我设法得到第一个动作（点击索引中的5个幻灯片链接中的任何一个）来加载具有淡入效果的幻灯片（而不是滑动幻灯片）。

但是，一旦打开任何幻灯片，我需要在幻灯片之间切换时进行滑动过渡（通过向左/向右滑动）。现在，相同的效果（淡入/淡出）会覆盖此过渡。我知道这是因为我的一般语句只检查afterSlideLoad中的索引但不确定只有在从索引幻灯片中获取操作时我才能激活它。

SO FAR

这是我到目前为止所做的：

$('#fullpage').fullpage({
  css3: true,
    // Hide the slides container before the next slide loads
    onSlideLeave: function(anchorLink, index, slideIndex, direction) {
      if(index == 3 || index == 4){
        $.fn.fullpage.setScrollingSpeed(0);
        $('.fp-section').find('.fp-slidesContainer').hide();
      }
    },

    // Display the slides container by fading it in after the next slide has been loaded.
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
      if(index == 3 || index == 4){
        $('.fp-section').find('.fp-slidesContainer').fadeIn(700);
        $.fn.fullpage.setScrollingSpeed(SCROLLING_SPEED);
        }
    },

}

这是我用来从索引到其中一张幻灯片的内容。

  $(".button1").click(function() {
    $.fn.fullpage.moveTo('sectino1', 1); //move to index of grills
    $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
  });

这是我用来在幻灯片打开后在幻灯片之间移动的方法。

 $(".slide-left").click(function() {
    $.fn.fullpage.moveSlideLeft();
    $('.fp-section').find('.fp-slidesContainer').hide(); //hide current slide
  });

JS FIDDLE

https://jsfiddle.net/0hLzxrea/28/

Answer 1

为什么不直接使用fullpage.js提供的function silentMoveTo？

如果您想要的只是直接滚动到目的地，我不明白为什么要添加fadeIn或fadeOut效果。

Check this out无论如何。这就是你想要的吗？

Fullpage.JS：在滑动时更改afterSlideLoad上的动画

1 个答案: