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

Question

上下文/问题

我有一个包含 6 张幻灯片的 fullpage.js 部分。第一张幻灯片是其他 5 张幻灯片的索引。我设法获得第一个操作（单击索引中 5 个幻灯片链接中的任何一个）以加载具有淡入效果的幻灯片（与滑动效果相反）。

但是，一旦打开任何幻灯片，我需要在幻灯片之间切换时进行滑动过渡（通过滑动 left/right）。现在，相同的效果 (fade-in/fade-out) 会覆盖此转换。我知道这是因为我的一般声明只检查 afterSlideLoad 中的索引，但不确定如何仅在从索引幻灯片执行操作时才激活它。

到目前为止

这是我目前拥有的：

$('#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？

如果您只想直接滚动到目标位置，我不明白为什么要添加淡入或淡出效果。

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

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

Fullpage.JS: Change Animation on afterSlideLoad when Swiping

javascript

css

jquery

fullpage.js