fullpage.js

问题 I got a problem with sections. The text inside of section, overflows it. I don't understand this because, normally, when you disable autoScrolling, data is wrapped by the section. I downloaded fullpage demo and filled it with loads of text. Section wraps the text. My code is: Html: <div class="jumbotron about-section section" id="section1"> <p>lorem ipsum ... </p> </div> Css: .about-section{ background: url(../img/text_bg_sm.png); background-size: cover; background-repeat: no-repeat; font

问题 I am designing website using fullpage.js. I want to give title to each dot in horizontal navigation bar. function addSlidesNavigation(section, numSlides){ section.append('<div class="fp-slidesNav"><ul></ul></div>'); var nav = section.find('.fp-slidesNav'); //top or bottom nav.addClass(options.slidesNavPosition); for(var i=0; i< numSlides; i++){ nav.find('ul').append('<li><a href="#"><span></span></a></li>'); } //centering it nav.css('margin-left', '-' + (nav.width()/2) + 'px'); nav.find('li')

问题 i'm using fullpage.js and i'd like to animate 2 images as soon as i get to the second section. looks like i can't make it work with css only, so i picked up some js code from the documentation. check this jsfiddle: http://jsfiddle.net/67oe1jvn/9/ the thing is: if i scroll down to the second section, the 2 images get animated and fade in from left and right sides. BUT if i change section, nothing happens... now i want the to "disappear" as soon as i leave the second section. i used afterLoad

问题 I have been trying to trigger the packery animation of resorting the items similar to the page resize. I want the packery items to re-sort when the fullpage slide are switched. I am open to using a different method but I have started down the path of trying to use the fit method, triggered when fullpage.js callbacks "onSlideLeave" and "afterSlideload" happen. My idea was to move one item from the left to the right of the entire grid to force the reshuffle animation. I have created a reduced

问题 I am trying to integrate this code : http://codepen.io/babybackart/pen/GZPjJd on a section of a website using fullpage.js. This code is based on a previous question brilliantly answered by @Seika85 : Make a .div act like an image. The aim was to "contain" and resize the image on its container ".plancheBox" without cuting it. In this example, the cat picture's dimensions are driven by the container using this first javascript code: var calculateImageDimension = function() { $('.plancheBox img'

问题 I am trying to get to the bottom of an issue on a 4th generation iPad issue we are having. We keep getting the following error and the page refreshes so there is no way to debug this in developer tools on a mac: "A problem occurred with this webpage so it was reloaded" The page uses fullpage.js and renders 22 separate html5 (mp4) videos that run in the background of each full page/section. Weirdly, if we change the code to only render say 15 videos the page works fine! The videos are between

问题 What's happening: Scrolling works no matter which position i have the mouse while i scroll. What i want to achieve: When the user scrolls with the mouse pointer positioned inside a particular container, I would like to disable the plugin from changing pages. When the user scrolls with the mouse pointer outside that same container, the normal functionality of the plugin should be restored; i.e. the pages should be scrollable again. What have i tried: I listened for the scroll event on the

问题 I'm currently using fullPage.js for an information panel. When the user clicks the info button, a fullPage.js overlay appears on top of the rest of the page. The issue I'm having now is that I don't want the fullPage.js functionality to be applied to the rest of page when the info button isn't active. Is there a way to fully disable all fullPage.js functionality? Thanks! 回答1: You can destroy it completely by using the destroy function: //destroy any plugin event (scrolls, hashchange in the

问题 I tried to create a full page horizontal slider by using fullpage.js plugin. I use only one section with 3 slides. I tried to add a fixed navigation to slides in the top of page, so user can open the slides directly from the top navigation, but it doesn't work. Can anyone help me how to make it works? HTML: <div id="header"> <a href="#" class="toSlide" data-index="1">Link to slide 1</a> <a href="#" class="toSlide" data-index="2">Link to slide 2</a> <a href="#" class="toSlide" data-index="3"

问题 I'm using fullpage.js for it's super basic functions: make each section on my site full height of viewport and to lock the scroll when scrolling from section to section. Instead of sliding from section 1 to section 2, I want to animate the background of section 1 by making it larger and fading it out, then fading into section 2. Basically, this would be a custom transition for this slide. The plugin has an event instance OnLeave which allows to execute something when user scrolls past a