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

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 Horizo​​ntal Extension 。