为从最后一张幻灯片到第一张幻灯片的无限滚动添加滑动过渡

Question

我正在使用 fullpage.js 创建每张 5 秒自动滚动的幻灯片。我有无限滚动，但我无法添加从最后一张幻灯片到第一张幻灯片的滑动过渡 - 它只是出现了。

您可以在此处查看问题 - https://rimildeyjsr.github.io/spotify-circle-animation/#projects

我想我错过了什么，我不确定它可能是什么。

jQuery:

var indexSlide = 0, sliding = true;    
$('#fullpage').fullpage({

                anchors: ['home','about','projects','contact'],

                loopHorizontal: true,

                fixedElements: '#toggle,#overlay',

                slidesNavigation: true,

                menu: '#menu',

                controlArrows: false,

                slidesNavPosition: 'bottom',

                afterLoad : function(anchorLink, index, direction) {


                    if((index === 3 || anchorLink === 'projects')) {
                        callMakeDiv('#1f3264', 3);
                        $('#slide1 .card').addClass('come-in').one(animationEnd,function (){
                            $('.card').css('opacity','1');
                        });

                        if(sliding){
                            var id = setInterval(function(){
                                $.fn.fullpage.moveSlideRight();
                                indexSlide++;
                            },5000);
                        }
                    } 
                },

                onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) {
                    var isFirst = direction === 'right' && nextSlideIndex > slideIndex + 1;
                    var isLast = direction === 'left' && slideIndex > nextSlideIndex + 1;
                    $(this).parent().toggleClass('no_transition', isFirst || isLast);
            }
 });

css:

.no_transition {
    transition: none !important;
}

Answer 1

您必须使用 fullPage.js 的选项 continuousHorizontal:true，但它要求您使用 Continuous Horizontal Extension。