Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fullpage JS, execute on different pages

I'm developing a project in AngularJS and I am using the Fullpage.js to scroll the page. So far so good, the problem is as follows:

As I have inside pages, must also use the scroll script these pages. But even creating the function as Scope to work on all pages or creating it with different name and starting in each of the FullPage returns the following error:

FullPage: Fullpage.js can only be initialized once and you are doing it multiple times !

Does anyone know how can I do so that when I start the function of another page, I cancel the function of FullPage the previous page and start another function of the current controller again?

Follows function I'm using:

vm.rolagem_home = function(){
        $timeout(function(){
         $('#site').fullpage({
                    //Navigation
                    menu: '#menu',
                    lockAnchors: false,
                    //anchors:['firstPage', 'secondPage', 'trespage'],
                    navigation: false,
                    navigationPosition: 'right',
                    //navigationTooltips: ['firstSlide', 'secondSlide'],
                    showActiveTooltip: false,
                    slidesNavigation: true,
                    slidesNavPosition: 'bottom',

                    //Scrolling
                    css3: true,
                    scrollingSpeed: 700,
                    autoScrolling: true,
                    fitToSection: true,
                    fitToSectionDelay: 1000,
                    scrollBar: false,
                    easing: 'easeInOutCubic',
                    easingcss3: 'ease',
                    loopBottom: false,
                    loopTop: false,
                    loopHorizontal: true,
                    continuousVertical: false,
                    //normalScrollElements: '#element1, .element2',
                    scrollOverflow: false,
                    scrollOverflowOptions: null,
                    touchSensitivity: 15,
                    normalScrollElementTouchThreshold: 5,

                    //Accessibility
                    keyboardScrolling: true,
                    animateAnchor: true,
                    recordHistory: true,

                    //Design
                    controlArrows: true,
                    verticalCentered: true,
                  //  sectionsColor : ['#ccc', '#fff'],
                  paddingTop: '0em',
                  paddingBottom: '0px',
                  fixedElements: '#header, .footer',
                  responsiveWidth: 0,
                  responsiveHeight: 0,

                    //Custom selectors
                    sectionSelector: '.section',
                    slideSelector: '.slide',

                    //events
                    onLeave: function(index, nextIndex, direction){},
                    afterLoad: function(anchorLink, index){},
                    afterRender: function(){
                        $(window).load(function() {
                            $('#loading').hide();
                        });
                    },
                    afterResize: function(){},
                    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                        console.log(slideIndex);
                        if(slideIndex > 0){
                            $('.fp-prev').show();
                        }else{
                            $('.fp-prev').hide();
                        }
                        if(slideIndex == 6){
                            $('.fp-next').hide();
                        }else{
                            $('.fp-next').show();
                        }
                    },
                    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){

                    }
                });
     }, 1000);
    }
like image 856
Maurício Krüger Avatar asked Dec 11 '25 06:12

Maurício Krüger


1 Answers

Yes, you should call the same DIV and destroy the FullPage, so you managed to call in another div again.

if($('#agencia').fullpage() != ''){ 
      $('#agencia').fullpage.destroy('all');   
}

Working - https://codepen.io/alvarotrigo/pen/bdxBzv

like image 121
Shelon Avatar answered Dec 12 '25 18:12

Shelon



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!