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。

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

1 个答案: