添加從最後一張幻燈片到第一張幻燈片的無限滾動的滑動過渡

我正在使用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; 
}

來源

2017-09-18 Rimil Dey

你必須使用fullPage.js的選項continuousHorizontal:true，但它需要你使用Continuous Horizontal Extension。

來源

2017-09-18 22:55:40 Alvaro

我已經差不多實現了它。如果你能指出我走向正確的方向 - 只有變化是留下的，我無法弄清楚。 –

添加從最後一張幻燈片到第一張幻燈片的無限滾動的滑動過渡

回答

相關問題