fullPage.js jQuery Plugin for fullscreen scrolling websites


fullPage-js-fullScreen-scrolling-website
Nowadays is very common to find fullscreen websites as it was in the past in the age of flash, but now, with the power of HTML, CSS and Javascript.

Some examples:

I had to do one of this websites and I found out there was nothing in the jQuery plugins world to make this task easier.
In an attempt to create something to make things easier for other people trying to do the same, I’ve created a simple plugin which creates the basic structure and functionality to start making a fullscreen scrolling website, also known as single page website.

I’ve named it fullPage.js and It is available at my github account.

It’s in the first version and I hope to keep improving it with the time. Right now, is capable of:

  • Scroll within sections using they mouse wheel scroll
  • Scroll within sections and within sliders using the arrow keys and the pageUp and pageDown keys
  • Use multiple callbacks
  • Use touch events for mobile and tablet devices
  • Add a menu linked to to the sections
  • Support for CSS3 animations with jQuery fallback
  • Use of anchor links (#) for each section and slides
  • Support for scrolling inside each section
  • Resize the sections size as well as the text when resizing the browser’s window
  • Autoadjust itself to fit the current section/slide when resizing the browser’s window
  • Admit some options such as the scrolling easing, the background color of the slides, the scrolling speed, loop options, callbacks and the vertical align of the text within the sections

And all of this being compatible with old browsers such as Internet Explorer 8, 9, Opera 12 etc which already still being used by many users nowadays.

Github

View demo

Creating a full scrolling website

The structure is quite simple, adding a `section` class for each section of the site, and `slide` for each slide within a section:

<div id="fullpage">
     <div class="section">WHATEVER</div>
     <div class="section">WHATEVER</div>
     <div class="section">
          <div class="slide">Slide 1</div>
          <div class="slide">Slide 2</div>
          <div class="slide">Slide</div>
          <div class="slide">Slide 4</div>
     </div>
     <div class="section">WHATEVER</div>
</div>

To initialize the plugin with default options, is as simple as this:

$(document).ready(function() {
    $('#fullpage').fullpage();
});

Here you have a list of some pages using this plugin.

Documentation & Questions

For more documentation about the plugin, check it at the github repository.
I encourage you to use the issues forum to report bugs or ask any question related with the plugin.
Also, don’t forget to search for your question before opening a new thread as they might have been already asked previously.

Donations admited

If anyone is so kind to invite me for a coffee I will appreciate it a lot :)
Donate

  • echomrg

    there’s something really wrong somewhere in the code: if you resize the browser window things turn really ugly. If you make the window smaller things get a little messy but overally usable, the only real problem is that if you go below 800px the right pointing arrow disappears.
    on the other hand if you make the window bigger there are a few more problems: the github label becomes huge (takes up most of the page) and all the content gets scaled up (and the pictures get blurry really fast). if you go back to the original size the page was loaded the content looks very different.

    i’m testing it on firefox 24.

    • Alvaro

      @echomrg:disqus thanks a lot for the reports! About the arrows below 800px, it depends on the way the site is designed. I have designed my site with a wrap of 960px and under that width the site should stop resizing itself. Even if i didn’t defined my wrap, the ipad images at the bottom of the site would be restricting me as well. With no wrap and no big images, this shouldn’t be happening. Any suggestions for this? What would be the behavior you expect?
      About the github label, somethings terrible wrong!! You are right :) I’m gonna check it. Thanks!

    • Alvaro

      @echomrg:disqus the example was updated without the wraps and the bug with the images resizing has been solved in the last commit.

      • echomrg

        hi! thanks for answering.
        i tested the new version and the original problems are fixed.
        but i noticed another weird behaviour:
        if i go to the horizontal slider page and then resize the window the content of the horizontal slides gets moved around, scrolling left and right depending on if you make the window bigger or smaller. when you stop resizing the slides snap back in the intended position.

        considering that people don’t usually go around resizing pages after loading it’s definitely a minor problem, but it’s still weird to look at.

        also, just to be clear, i’m not complaining ;) i just hope to help out a little with debugging.

        • Alvaro

          @echomrg:disqus that movement is done on purpose. If there were no movement, you wouldn’t end up seeing the same slide/section. As the sections have a defined height and width, once you resize, they have have to adjust themselves to end up in the same exact slide you were in. As this takes some operations over the page elements, it is only done once you stop resizing and not in every resize event which fires while when you are resizing, which could execute 100 times those operations. Thanks though for commenting it.

          • echomrg

            great! thanks for the update!

          • Guest

            great! thanks for the update!

  • Carlos Sanchez

    Great coding!

    Can you please add the option to advance to the next slide/section like a presentation?

    • Alvaro

      What exactly do you mean? By clicking with the mouse? There are a few public method available in the plugin which can give you the control over it: `moveSlideDown`, `moveSlideUp` and `moveSlideTo`. Documentation at the github repository.

  • Alex Liebert

    Let’s say I want to add a menu so it scrolls down when I click, Is that possible?

    • Alvaro

      @alexliebert:disqus yeah it is as you can see in the living example: http://alvarotrigo.com/fullPage/
      Documentation for it on github under the option `menu`. Any troubles, don’t hesitate to ask here or on github issues.

      • Alex Liebert

        I just saw that, I should’ve read first, now I have a last question, Let’s say I want to add one more div, Like a Five Menu and so. Just by adding the div. will it work? or how can I acomplish that?

        • Alvaro

          @4fedfbf28dd3d7812249c43276e43b20:disqus no, you will need to make use of anchor links and use them both in the menu and in the section as detailed in the documentation. If you have any problem with it, rather than using this comments, use the github issues forum where i will be able to explain it with code in a better way.

  • Nelson Henrique

    Is it possible to add just in a div, for example, not only to body or full page?

    • Alvaro

      What do you mean with “not to body” or “full page”? What do you want to accomplish?

      • Nelson Henrique

        I don’t want to add scrolling in the full page, but in a specific “div”.

        • Alvaro

          @nelsonhenrique:disqus you can not do it right now. But it has been suggested in the github issues and I will consider it. I will update you with any change. The only option I see from now, is using an iframe inside the `div` with fullPage in it.

          • Nelson Henrique

            It will be amazing. Thanks for the code, it’s great! :D

  • Ing. Michal Hudak

    How can I do loop in page scrolling like in slider ?

    • Alvaro

      @4fedfbf28dd3d7812249c43276e43b20:disqus You can’t currently. I’m thinking about adding a new option to loop the site. I will let you know once it is ready, which will be in less than 2 days and possible today.

    • Alvaro

      You can’t right now. I’m thinking of implementing an option for it. I will let you know when it is ready, which hopefully will be in less than 2 days, probably today if I have time.

    • Alvaro

      @4fedfbf28dd3d7812249c43276e43b20:disqus I have just updated a new version to the github repository with two options. `loopTop` and `loopBottom` to enable the looping from the top or from bottom. By default they are set to false, you will just need to set them to true on the plugin initialization. I will document them later. Example: $.fn.fullpage({loopBottom:true});

      • Ing. Michal Hudak

        Excelent ! :)

        It is possible to make scrolling to look like actual loop?

        I mean if I go to last section, then scroll DOWN ( from up to down ) to first one.
        Also similar if I go from first to -1 position, it will scroll UP ( from down to up).

        Similar in slide loop.

        If you know I mean.

        • Alvaro

          @4fedfbf28dd3d7812249c43276e43b20:disqus that´s much more complex and break a bit the structure of the site. I´m afraid this can´t be done now and probably won´t.

      • Ing. Michal Hudak

        I will promote this plugin on my site also on social sites. This is just excellent work.

  • Hamanovich

    It’s really good code and working in IE browsers. Thx a lot!

    • Alvaro

      @hamanovich:disqus Thanks! I hope it helps!

  • MyBirthdayHits

    Great plugin – huge thanks for all your hard work. One question, is it possible to trigger an event when the the page has finished sliding into view? I’ve played around with a a few JQuery plugins – waypoints and inview for example – but I cannot get them to trigger an event once the slide is loaded. Many thanks.

    • Alvaro

      @MyBirthdayHits:disqus it is not possible yet. But now that you mention it, I will try to add that functionality as well. I will let you know once it is ready!

    • Alvaro

      @MyBirthdayHits:disqus I have just committed a new version with this feature. You can make use of the event `afterLoad` to add a callback to any of the sections you want. I hope it helps! Let me know if it works as you expected!

      Documentation at github.

  • Thomas

    Great ! But can we change color of arrow ? in sliders…

    • Thomas

      Ok I found ^^ Sorry !

      • Alvaro

        There’s an option now called `controlArrowColor`, but I’m not sure about it and that’s why it is not in the documentation. I will let you know if it suffers from any modification.

        • Thomas

          Yep, i modify this. It works

  • Alex Liebert

    My friend, I already learned how to add more pages, but there’s a last question, does it work on Jimdo?? I alredy tried but doesn’t seem to work. do you know a forum or somewhere where I can get some help? sorry to bother you and thank you for this amazing job, you will be credited by this where I use this theme.

  • Hamanovich

    Hi, one important thing: how can I destroy (if I can) that plugin? maybe some different method, that can give me current functionality?
    for instanse, after loading the page, fullPage.js is working correctly, but, if I want to disable (switch off) and have just simple scrolling page – I click button “Disable fullPage”.
    or, another instanse – in desktop version I need to have fullPage web-site, but in mobile phones, I need to have only scrolling page, without fullPage. (adaptive mockup)

    How can I do that?

    Thx.

    p.s. sorry for my Eng. (I’m from Belarus).

    • Alvaro

      Right now, as documentation at github points out, you can use the option `touchScrolling:false` to disable the autoscrolling in touch devices and enable the normal scrolling.

      This feature might suffer from modifications, but right now, this is the solution for you.

      • Hamanovich

        Sorry, for my silly questions. In private ocassions. How can I redefine that variable (touchScrolling)?

        Because, by default I have:
        var scrollNo = $.fn.fullpage({
        touchScrolling: true
        }),

        and, after clicking ‘disable’ button, I need to have code like this (disable touch):

        $(‘#disable’).click(function(e){
        e.preventDefault();
        scrollNo = $.fn.fullpage({ touchScrolling: false });
        });

        help me,
        thanks.

        • Alvaro

          You should better ask this question at the github issues section. (https://github.com/alvarotrigo/fullPage.js) Here is not the best place to answer with code.

          • Hamanovich

            I’ve done it, and hope you help me as soon as may

  • Luis Hernandez

    Great job! I have a question, do not drive very well javascript I would like to know how to use background images for the sections. greetings!

    • Alvaro

      You can find an example of it on the github repository: https://github.com/alvarotrigo/fullPage.js/tree/master/examples

      It´s not about javascript but about CSS.

      • Luis Hernandez

        $(document).ready(function() {

        var pepe = $.fn.fullpage({

        slidesColor: [‘background:url(../imagenes/backhome.jpg) no-repeat center center fixed;’, ‘#4BBFC3′, ‘#7BAABE’, ‘whitesmoke’, ‘#ccddff’],

        anchors: [‘firstPage’, ‘secondPage’, ‘3rdPage’, ‘4thpage’, ‘lastPage’],

        menu: ‘#menu’

        });

        });

        • Alvaro

          @disqus_ztog3aqYOl:disqus as I said, download the examples from the github repository and there you have an example called “backgrounds.html”. This is not a place to post code, use github issues for it.

  • Eduard

    how to add body class anchor-data? when you scroll to another section and body class changes…

    • Alvaro

      I’m not sure of understanding you very well. But you can find the documentation at the github repository: https://github.com/alvarotrigo/fullPage.js

      If you have more questions regarding the use of it, please use the issues forum: https://github.com/alvarotrigo/fullPage.js/issues?state=open

      • Eduard

        for example active section in viewport is section with data-anchor=”3rdpage”… how to add data-anchor to body class?

        • Alvaro

          Please, use the github issues and I will be happy to answer there. This is not place to add code in the comments.

  • matthias

    hello, thank you for this great plugin! I really appreciate that it works also on IE 8, thereby it is one of those plugins you really can use!

    Still i have a question: Is there also an option to have a navigation like on the apple website: the five points on the right site of the page?

    Thanks again

    • Alvaro

      It needs to be polish, but the functionality is there. I’ve just updated the documentation for it on the github repository.

      Here you have an example of how to use it: http://jsfiddle.net/7PwsS/25/

      If you want to change the color, I would recommend doing it with CSS.

      • matthias

        Great thank you very much!

  • Mike

    Hola Alvaro, Gracias por el plugin!! Tengo una duda que no se como resolver ¿Se puedria hacer el scroll en horizontal en lugar de vertical? Pero no con Slides, lo que quiero es darle formato horizontal a las secciones.

    Gracias!!!

    • Alvaro

      Podrias crear una unica seccion con varios slides, pero aun no es posible hacerlo funcionar con links internos (#) en ese caso.

      Un saludo!

    • Alvaro

      Acabo de subir una nueva version. Ya es posible usar links internos (#) para las secciones.

      • Mike

        Genial!!!

        Me encanta este Plugin ;)

  • Andreas

    Hello Alvaro.
    Thanks for this nice Plugin.
    But for me, there is one issue:

    Scrolling to the next page by Mouseweel or Arrow-Keys is not sensible enough.
    Often I have to turn the Mousewheel several “clicks” or press the keys twice.
    Also sensitivity changes from slide to slide.

    Is there a way to fix this?

    • Alvaro

      There´s a delay of 700 milliseconds between you reach a section or slide until you can move to the next one.
      This is done on purpose because using the laptops trackpad, or even some Apple mouses, it was difficult to stop at a certain section or slide. I invite to try it by yourself.

      Deleting this delay, would make it difficult to use with a trackpad.

      • Rabbey

        Could you add an option to remove that delay?

        • Alvaro

          If you remove that delay, then the plugin will not work well for people using a trackpad.

          • disqus_p2ukxdA7qp

            First & foremost, thanks Alvaro for your excellent work! -I hope you won’t mind if I chime in. I notice a similar functionality, on the apple website that you reference as an example (iphone5c webpage) – although I noticed their delay is slightly more brief than 700 milliseconds, would you be able to disclose to me where in the script I might be able to manually edit the # of milliseconds?

          • Alvaro

            You can edit the line 42: https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js#L42

            But be careful, don´t set it very low or the plugin won’t behave as expected on laptops. (that’s why it is not an option in the plugin, people is not usually aware of this)

  • Guest

    Can I customize the section height & how? million thanks

  • kennyzx

    Hi Alvaro,

    can I customize the section height & how? million thanks

    • Alvaro

      No. This is a full page plugin, which means the sections will have the full height and full width :)

  • Moe

    Hello Alvarom,

    at first I would thank you for this nice Plugin. At the moment I use it at my page, but once I resize the Viewport or scroll up/down, I get the Error: “Cannot read property ‘top’ of undefined” (Chrome), “TypeError: dest is undefined: console.log(dest.top);” (Firefox) in the function scrollPage(element, callback).
    Do you ever got this bug?

    On the other side I have a fixed navigation with a fix height in my site and try to get it work with your plugin. Is it possible to define the height, without my header?

  • Rabbey

    How can I make a static header or footer?

  • Mads

    Hi Alvaro,
    Thanks for the great plugin!!

    I have a small question.
    How can i add a dot-navigation to the horizontal “slides” within one “section”. Fx in one of the sections i have a slideshow with 5 pictures, using your “slide” function. I would like to add dot-navigation only to this slideshow.

    I have tried a lot of stuff but i cant get it to work.

    How can i make this?

    Thanks again

  • Marco

    Great work! we are trying yout plugin and it works very well!
    Could you tell us if is ther a way to catch the horizontal slider events?
    Seems that only vertical slider events are raised.

    Thank you and good job!
    Marco

  • Oli

    Hello Alvaro
    Is it possible to vertical align text within the slides?
    If I have 2 slides in a section – the first with an image, the second slide with text aligns with the top of the image on the first slide rather than being vertically centered.

    Thanks

    • Alvaro

      Have you used the option `verticalCentered:false` ? That option defines whether the content will be vertically centered or not.
      More in the documentation: https://github.com/alvarotrigo/fullPage.js#options

      • Oli

        Thanks for your reply Alvaro
        I have verticalCentered: ‘true’
        So using your example page – slide 1 has an image centered perfectly, then slide 2 has a paragraph but is aligned to the top of the slide 1 image >
        http://madebyblah.com/fullPage/example2.html

        • Alvaro

          Thanks for the link and the reporting of the problem.
          I have just fixed it in the last commit. You can download it from github.

          • Oli

            Nice work and thank you

          • chromaticMind

            Hello Alvaro,

            I am looking for a feature where one can choose particular slides that get vertically centered while the others don’t.

            Is this possible?

            Thanks
            Ashish

          • Alvaro

            Of course. You can always overwrite the properties with CSS. That’s belong the plugin scope. If you dont know how to do it I would recommend to ask in another place.

          • Oli

            The fix has thrown out the horizontal centering of the first slide
            http://madebyblah.com/fullPage/example2.html

          • Alvaro

            @2655b7d9b11edeecd7ceaeb93851ef47:disqus sorry I forgot to commit the CSS file. You can download it now.

  • Marc Debraize

    Hello Alvaro,

    Thank you for this very good plugin,

    I have a problem with a structure, similar to your “example2″.

    I have a big content to put in one slide (or a section, it’s the same problem) but there’s a responsive layout on the height, concerning slides and sections.

    So i can’t see the entire content in a slide, and when i scroll down to see all, the layout goes to the next slide.

    How can I make an exeption for a slide or section with a big content on the hight?

    (I made a screen shot when I scroll => Attachment)

    • Alvaro

      @marcdebraize:disqus yeah of course. You just need to make use of the option `scrollOverflow` setting it to ´true´: scrollOverflow:true. As detailed in the documentation: https://github.com/alvarotrigo/fullPage.js#options

      • Marc Debraize

        It’s just perfect :) really thank you!

  • Nerea

    Hi Alvaro,

    Thanks for the plugin, it’s really useful ;)

    Just one question, I’ve tried to add a html5 based video in of the section and it doesn’t work. When I remove the call for initializing the plugin, the video starts without problem. So it seems that it’s not a problem with the video code but something between the html5 video and the plugin.

    Any ideas? I’m driving a little bit crazy with this issue.

    Thank you for your time!

    • Alvaro

      Don’t get crazy yet! :)
      The plugin changes the DOM structure of the site and therefore anything who has to be fired on DOM ready should be added to the even ‘afterRender’ the plugin offers.

      Take a look at the last answer of this related question at the github issues forum: https://github.com/alvarotrigo/fullPage.js/issues/35

      Let me know if you make it work.

    • Alvaro

      Don’t get crazy yet! :)
      The plugin changes the DOM structure of the site and therefore anything which has to be fired on DOM ready should be added to the even ‘afterRender’ the plugin offers.

      Take a look at the last answer of this related question at the github issues forum: https://github.com/alvarotrigo/fullPage.js/issues/35

      Let me know if you make it work.

      • Nerea

        Thank you so much, it worked perfectly ;)

  • Matteo

    Hi Alvaro,

    thank you for this plugin, but I’m actually having some problems using it.

    In the website I’m working on there are a menu and a footer which I want to stay still when scrolling the sections.

    I also have a submenu within the second section which I want to stay still while scrolling slides.

    Every section/slide has a full background image.

    But, when I tried to put together my 6 pages (4 sections, one with 3 slides) strange things happened…

    The menu doesn’t show up.
    Footer scrolls away with the first section.
    The bg image is there only on first and last section.

    I really don’t know what to do.

    If you want to take a look at my code: http://villareginateodolinda.com/test/index.html

    Thank you
    Matteo

    • Alvaro

      For the headers and footer take a look at the answer I gave at github:
      https://github.com/alvarotrigo/fullPage.js/issues/69

      If you don’t want to use that solution for any reason, using css3: false, would solve it.

      To solve the problem you have with your backgrounds, please download the last version of the CSS file : jquery.fullPage.css

      I hope it helps!

      • Matteo

        I tried the solution you suggested but it only works if css3 is set to false.
        Even having css3 set to false is not enough if the header and footer aren’t taken off from the superContainer

        With the new css the bg images now work. Thank you.

        But there is one last issue. In the section which has slides, all the contend has been moved to the last slide.

        • Alvaro

          No. They do not need to be taken off if css3 is set to false. You just have to take a look at the public example to see it working as expected: http://alvarotrigo.com/fullPage

          About your texts, that’s a problem with your own CSS. Nothing to do with the plugin itself. If you delete the style “#services-parties article.content” everything works as expected.

          • Matteo

            I’m sorry, i messed up a little bit.

            But, in your example the menu is a ul.
            In mine, the ul sits inside a box. If I set css3 true I only see the box but not the menu (even taking it off as you suggested). The only way is to set css3 false.

            Anyway, now it works. Thank you!

  • Umabel Studio

    Nice job! Cool and simple staff. good looking.
    Bravo!

  • Alex

    Hello Alvaro,

    First of all, congratulations for your blog and for this fantastic plugin.

    I am trying to do some experiments with it and I have troubles when I try to set up a background fixed picture for all the website. I am doing it with position: fixed; and z-index: 1; trying to put it behind the rest of the elements, but when I do so, I cannot see any of the slides… Do you think you could help me?

    Thanks so much in advance!!

    Alex

    • Alex

      Acabo de ver que hablas español, quizá debí imaginámelo viendo tu nombre… :D

      • Alex

        Acabo de conseguirlo, era una tontería… simplemente he puesto background al body y background-size: cover;

        Gracias otra vez, impresionante plugin!!!

        • Alvaro

          De nada! Un saludo!

    • Alvaro

      Can you reproduce your problem in http://jsfiddle.net/? How are you trying to apply your background, with which CSS?

  • Luis Humberto Mendoza Guerra

    Muy buen plugin!!!

    Tengo una consulta: estoy utilizando un mapa de google en una de las secciones en el que puedo agrandar y achicar el mapa, pero esta accion es detectada por el plugin (jquery.fullpage,js) y no me permite interactuar con el mapa mas sino actua como un cambio de seccion en la pagina.

    Como puedo hacer para evitar irme a otra seccion cuando estoy interactuando con el mapa

    Gracias!!!

    • Alvaro

      Buenas @luishumbertomendozaguerra:disqus, ahora mismo no es posible pero ya mirare si puedo implementar algo para evitar lanzar el evento en una lista de elementos pasada como una opcion al plugin.

      • Luis Humberto Mendoza Guerra

        muchas gracias Alvaro, por tu respuesta, bueno esperare la implementacion entonces, gracias

    • Alvaro

      De que modo puedes agrandar y hacer pequeno el mapa? He probado el mapa de google y por defecto no se puede usar la ruleta del raton para ello. He probado el mapa de Bing y ahi funciona bien el zoom independientemente del plugin.

      • Luis Humberto Mendoza Guerra

        hola.

        El problema esta en el ipad o tablet, que cuand tu mueves, agrandas o achicas el mapa, el plugin fullpage lo reconoce como una accion de cambiar de seccion

        • Alvaro

          No habias nombrado nada de un ipad… eso es otro problema bien diferente… y lo veo mas complejo de solventar. Tengo que mirarlo con mas calma.

          • Luis Humberto Mendoza Guerra

            si el problema es solo alli en tablets y smartphones

  • David

    hi alvaro.

    Thank you for your plugin!

    I have a question about horizontal scrolling. Let’s say you have a menu on your start page. Each link will be opened by scrolling horizontal to its corresponding content. Now I don’t want the horizontal pages one after the other. Is it possible to scroll horizontal to the second page without passing the first page?

    • Alvaro

      I’m not sure to understand what you are asking. You want the horizontal slides to slide without animation?

      • David

        No sorry, I think my question is not intended in your plugin, but I try to explain it again. If you look at your demo and you are at the second page, you can go to “one”, “two” and “three” by sliding horizontal. So if I want to go from “second page” to “three”, I have to cross “one” and “two”. Let’s say we are at the “second page” without arrows, but with three links that lead to the pages “one”, “two” and “three”. So now I click link “three” and page “three” scrolls directly into the Viewport, without crossing page “one” and “two”. I hope that I have explained it better this time.

  • Oli

    Hi Alvaro,

    Is it possible to use the swipe touchscreen on iPad and iPhone to move left to right on slides?

    On your demo the vertical swipe scroll works to move up and down between sections but then not left to right to move between slides .

    Thanks

    • Alvaro

      The vertical movement on touch devices is not exactly like swipe, it is not a 1:1 touch movement.

      You could use swipe if you want. Just create a normal section without slides and play with swipe methods such as `prev()` and `next()` linked to some control arrows or dots.

      I will take a look at it anyway and update you with any change or improvement.

    • Alvaro

      Horizontal scrolling for touch devices is now available in the last version. It is not like swipe, its not 1:1, but is functional.
      Hope it helps!

  • Mike

    Hi Alvaro,

    Nice work on the plugin! One question: Is it possible to create a link to scroll to a section and after that slide to a slide within that section?
    Thanks

    • Alvaro

      Yeah of course. Just add the corresponding anchor links. You can see it working on the website example: http://alvarotrigo.com/fullPage/#secondPage/2

      Read the documentation about “Using anchor links” for slides:
      https://github.com/alvarotrigo/fullPage.js#using-anchor-links

      • Mike

        Thanks for the fast reply, but maybe my question was unclear(sorry). For example: I am in slide four(http://alvarotrigo.com/fullPage/#4thpage) and I want a link on that slide to got to slide two and then the second slide(http://alvarotrigo.com/fullPage/#secondPage/2)

        • Alvaro

          You mean, a link to the section 2 and the slide 2. As I told you, you just need to make use of anchor links. Your link should look like this “http:// alvarotrigo.com/fullPage/#secondPage/2″ (without the whitespace after http://).

          If you use that URL in any link, that will redirect you to the corresponding section and slide.

          • Mike

            Thanks again, I read all the documentation and tried your advice, but still can’t get it to work. I set up an example http://test.30.nl/html/fullPage/#3rdPage

            External links to a slide work fine, but within the page it doesn’t seem to work…

          • Bart

            The problem is adding a link in a href on the page. onhashchange does not do the deeplink to a slide. Created 2 new functons which do work by adding a class to the hrefs. https://github.com/alvarotrigo/fullPage.js/pull/77

          • Alvaro

            Hi Mike, I’m glad to tell you that I’ve implemented a solution for it. Please, download the last version of the plugin and you will be able to add internal links as I explained you in previous answers.

      • Alvaro

        “http:// alvarotrigo .com /fullPage/#secondPage*2″ would be the link (without the whitespaces)

      • Alvaro

        “http:// alvarotrigo .com /fullPage/#secondPage/2″ would be the link (without the whitespaces)

  • Matt

    Thank you so much for this. I have been working on modifying this for a website. I have one issue that I haven’t been able to solve. The site has a footer file that is included on the page (classic ASP-don’t ask). Even with padding set within the javascript file, I can’t prevent the footer from being “overwritten” with the javascript element. I also have a header menu. With the padding set for the top, the header appears to be working fine.

    • Alvaro

      Can you post a link to the site or reproduce it in jsfiddle.com ? I’m not sure to understand your problem.

      You might want to take a look at this: https://github.com/alvarotrigo/fullPage.js/issues/48

      • Matt

        OK, I got it to work by looking at the link. I didn’t have the header and footer setup correctly in the CSS. Is there any way to add the option to automatically scroll/change the sections? Thanks again for this.

        • Alvaro

          You can make use of the public method `moveSlideDown` on the callback `afterRender`:
          http://pastebin.com/WyJ1kqyK

          You can do many things, you just have to think how to use the callbacks and methods as you wish.

          • Matt

            Excellent, I am looking for a way to scroll horizontally, too. Would I need to simulate a click on the control?

          • Alvaro

            It is related with this topic, but it’s not possible to do it right now with the plugin by default: https://github.com/alvarotrigo/fullPage.js/issues/9

  • Jumagar Febrian Siregar

    Hello Alvaro.

    Thanks for this great plugins.

    but i have one issue:

    at first load it only show 2 page, i need to refresh page once, to get all page load correctly.

    i check on firebug in show error like this:

    TypeError: dest is undefined
    var dtop = dest !== null ? dest.top : null;

    Is there a way to fix this?

    • Alvaro

      I need to see your code. Can you post a link of your site or replicate it in http://www.jsfiddle.net ?

      • Jumagar Febrian Siregar

        Thanks for the reply,

        but i already found my mistake, i put class “active” in more than one section. because of that, on firstload there is an error, because its found more than one active section.

  • Dhananjay Kumar

    Hello Alvaro,
    Instead of slidesColor for different Anchors, can I mention background image? If so , can you please let us know how. Any pointers from you would be of great help.
    Thanks

    • Alvaro

      You can find an example in the files that you have downloaded inside the examples folder. The one called “backgrounds.html”. You only have to use CSS to apply it to the desired sections or slides. Here’s a living example: http://jsfiddle.net/7PwsS/94/

  • Alejandro

    Hola Álvaro!

    Enhorabuena otra vez por tu fantástico plugin (escribí hace unos días preguntando una cuestión sobre background).

    He notado que el plugin solo redimensiona el tamaño de fuente (por ejemplo) cuando reduces la pantalla, pero no parece detectarlo cuando cargo la página directamente desde un tamaño pequeño o desde un dispositivo móvil. Cuando hago esto, debo redimensionar la ventana manualmente para que detecte el tamaño y así redimensione la fuente. ¿Me he cargado algo? ¿Funciona así? ¿Hay alguna solución para ello?

    Muchísimas gracias de nuevo por adelantado, un saludo!

    • Alejandro

      Imagino que será algo relacionado con ejecutar la función resizeMe al cargar la página, pero estoy un poco perdido…

      • Alvaro

        Buenas @Alejandro:disqus, la redimension del texto es algo que esta ahi en el plugin pero que tampoco es perfecto y que tengo pendiente en la lista de mejoras. No obstante, si quieres puedes probar a llamar a la funcion `resizeMe` en el evento `afterRender` con los valores `$(window).width()` y `$(window).height()` como parametros.

        • Alejandro

          Muchas gracias.

          Estoy intentando hacerlo pero no sé si lo hago bien… ¿cómo le digo que llame a resizeMe en el evento afterRender? ¿window.afterRender…?

          Gracias de nuevo por tu tiempo.

      • Alvaro

        Perdona. Me no me hagas caso. No se puede llamar a la funcion desde afuera porque es interna. Lo que puedes hacer es duplicar la funcion y sacarla fuera del plugin para poder usarla en la inicializacion del mismo.

  • Tommy

    Hey Alvaro,

    First of all, brilliant plugin! I am really, really enjoying this. Thank you for your hard work.

    I have one question; the resize function only resizes the text on window resize, not on load. I’m pretty new to jQuery/JavaScript, so this is probably a very silly question.

    Any help would be greatly appreciated!

    • Alvaro

      The resize function is not very well implemented and I’ll probably improve it.
      Meanwhile, if you want to use the current function, you could call it using the `afterRender` callback as I suggested in this answer: https://github.com/alvarotrigo/fullPage.js/issues/81#issuecomment-28414009

      Notice that you have to add the `resizeMe` function. Which is a duplicate of the one used inside the plugin.

  • Charles Lehnert

    Hi Alvaro,
    This plugin is excellent! I was afraid some of the functionality I needed wouldn’t be available, but each time I search, I find that it is included. I just wanted to thank you for the amazing work and responsiveness.

    • Alvaro

      Your welcome! And remember, you can do much more things by just using the callbacks and methods intelligently!

      • Charles Lehnert

        I just noticed, when using “#1stSection/1″ as an anchor link to the second slider in the first section, it works very well if I’m not currently in that section. However, when I am already in the first slider of that section, clicking that link doesn’t navigate to the 2nd slider. (It does nothing). I can navigate to it using the arrow even when the link doesn’t work. Do you have a solution for this?

        • Alvaro

          It is probably a bug form the last version. I will take a look at it tomorrow.
          Meanwhile, you can try to create the link using events: https://github.com/alvarotrigo/fullPage.js#using-events

          • Charles Lehnert

            Thanks. I understand how an event could link to a certain section or a slide that’s in the current section but not clear how I could link to the second slide within another section. My link is outside of the section the slide is in, which is why I was using the anchor link I posted above. Is there a way to do this?

          • Alvaro

            You are doing it in the right way. But as you say, it seems there’s a big when using the URL to call a slide inside the current section.

          • Charles Lehnert

            Can you let me know when you update it?

            Thanks again for your awesome work!

          • Alvaro

            I’ve just updated it now. Download the last version to check it. I hope it helps!

          • Charles Lehnert

            Awesome! Alvaro, you are the man!

            It works perfectly now.

            I have one more question for you—when I click the arrows to go to the next slider, it happens almost instantly, but when I click a link like “#1stSection/1″, there’s a delay of about 2 seconds or so before it starts sliding to the next slide. Is there a way to reduce this delay?

          • Alvaro

            @charleslehnert:disqus thanks for pointing it out. It was a mistake I made just before updating the version :) Solved.

          • Charles Lehnert

            Yes, it is!

            It is now working with no delay. I can’t thank you enough for being so responsive. Thanks for the plugin!

  • Felipe Funes

    Alvaro, felicitaciones y gracias. Muuuy buen aporte. Me costó echarlo a andar en una app rails porque tenía una ensalada en el vendor, pero ya todo anda bien.

    Una idea para futuros upgrades: Que la llegada al siguiente section se desacelere al final para tener un efecto de mayor suavidad en el desplazamiento.

    Saludos y una vez más: felicitaciones y gracias :D

    • Alvaro

      Hola Felipe, me alegro que te sea de ayuda :)

      Con respecto a la transición, si usas la opcion ‘css3:false’, puedes elegir el efecto de transicion que mas te guste dentro de jquery UI y pasarlo en la opcion ‘easing’. Si usas ‘css3:true’, puedes sobrescribir es estilo CSS “.easing” por el que tu quieras, bastará con añadirlo después de ‘jquery.fullpage.css’.

      Un saludo!

      • Felipe Funes

        Maravilloso, probaré.
        Muchas gracias!

  • 10rous

    alvaro
    muchísimas gracias

    un plugin maravillosa, un pregunta, estoy pensando en utlizar tu plugin para un proyecto que tengo pero necesitaría añadir varios enlaces para hacer scoll horizontal, lo mismo que las flechas ‘controlArrow’ pero en un slide para ir hacia la derecha y en el otro para volver a la izquierda, con un texto
    he tratado de añadir un como las flechas en el div del slide pero no me funciona
    NEXT

    hay alguna manera de hacerlo rápido?
    mil gracias

    • Alvaro

      Hola, me alegro que te sea de ayuda.
      Respecto a tu pregunta, es mas bien cuestion de diseno y CSS que del plugin en si. Yo recomendaria preguntar en sitios como http://stackoverflow.com/

      Un saludo!

      • 10rous

        gracias Alvaro!
        ya lo tengo

        saludos

  • Fuckara bin Dibri

    hello .
    you plugin will cool
    it will was gr8 luv yu marry me handsome

  • jonathanengstrom

    Hi Alvaro,

    Great plugin, however I’m having one issue, and hope you might be able to help?

    I need to remove the plugin once the screen becomes smaller than 780px, as I need the user to go back to a standard scrolling method. I can get it all working, so it does not fire if the screen size is smaller and the fires once it gets bigger again, however once it has fired once I cannot remove it once it is no longer needed.

    Is there any way of doing this?

    Thanks!

  • Chris B

    Hi,

    Just wondering if there is an easy way in which all the sections content is below the header opposed to behind it as i’ve got a solid header background? Its easy to get around it by not having a fixed header but I would still like it to be fixed ideally. Maybe setting the screen height + header height or something?

    Thanks

    • Alvaro

      Hi @disqus_EIb6mqFdkT:disqus, I don’t understand what you are looking for. A fixed header which is not fixed? Can you explain it in another way?

      • Chris B

        Hi,

        So I have the fixed header which also has a solid background color. The content for each section will therefore be hidden behind it slightly. I have added opacity on the menu so you can see the content behind in the screen shot attached. I have also attached a second screenshot which was edited in developers tools to show the desired out come i would like. Hope this makes more sense.

        • Alvaro

          Yeah I see. You want to use the last version of fullPage.js and use the option `fixedElements` in which you will add the menu element. Also, you will need to use the option `paddingTop` in order to avoid “eating” the content with your menu.

          There’s an example available here: http://alvarotrigo.com/fullPage/examples/fixedHeaders.html

          Let me know if that’s what you are looking for.

          • Chris B

            Hi,

            This is exactly what im looking for however the paddingTop option doesnt seem to do anything on my project or on the standard Github demo. Anything obvious I could be doing wrong?

            Thanks

          • Alvaro

            There was a bug, you needed to apply both values, paddingTop and paddingBottom or it wouldn’t work.
            I have already fixed that on the last version. Please try it again.

            Here you have a living example: http://jsfiddle.net/J8hqM/11/

  • Austin R Kowitz

    Hey Alvaro –

    I know everyone’s bombarding you with questions here, sorry to add to that. This is such an awesome plugin you’ve created!

    I have links in my fixed navigation that link to specific slides within sections.. I was wondering if there’s a way to highlight that navigation link when on that slide. it currently only highlights the section link…

    section | section2 | section2-slide2 | section3

    for instance if you were to click “section2-slide2″ – only the “section2″ link gets the active class.

  • sandra

    Hey Alvaro!
    I currently working on a website, and it lists you as the author?
    There was some similair “slide js” code, I was looking to see how to automatee the side ways slides to automatically scroll? (hard to describe, would be happy to show ya!)

    Sandra
    sandra@grimeinc.com

    • Alvaro

      Hello Sandra, that’s right. I’m the author of fullpage.js.

      What do you exactly want to accomplish ? I don’t have it very clear. Automatically scroll sections or the slides inside a section?

      Here’s a way to automatically scroll all sections:http://pastebin.com/WyJ1kqyK
      You can make use of the public method `moveSlideDown` on the callback `afterRender`.

      Remember callbacks are very powerful, used in the correct way you can do plenty of things and probably what you are looking for.
      Take a look at the documentation for more info about how to use them: https://github.com/alvarotrigo/fullPage.js#fullpagejs

      • sandra

        http://www.jennbeaupre.com/grime/#firstPage

        The top / BIO has 2 verticals slides and I am wanting them to automatically fade or move back and forth.

        I bet a call back would work, but I’m not great w js.

        Thank you so much, I will definitly be sharing this blog – so many cool things on here

        sandra@grimeinc.com

        • Alvaro

          You want the scrolling div to scroll automatically? That’s a question out of the plugin. I would recommend you to ask those kind of things in http://stackoverflow.com/ using the “jquery” tag for the question.

          Once you know how to do it, you could do it using the callback “afterLoad”.

          By the way, would you like to add your site to the section “who is using this plugin” in the documentation? https://github.com/alvarotrigo/fullPage.js#who-is-using-fullpagejs

          • sandra

            You can definitely add it on there :)

  • dr/aibolit

    Alvaro, great work! I have the goal to make scrolling by dragging mouse like here http://www.dasselundwagner.com/en/ is it possible with your plugin?

    • Alvaro

      I’m afraid it is not possible right now. I will take a look anyway to see if it could be applicable.
      Meanwhile, you might want to take a look at swipe.js plugin.

      Cheers!

    • Iwakura

      ^ This. Also that site works very nice without the scroll delay. How can that be achieved?

      Great work Alvaro

      • Alvaro

        You can change it in this line: https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js#L51

        But if you remove it setting it to 0 Apple computers will experiment problems when scrolling.

        • Iwakura

          Thanks for the anwser. But dasselundwagner.com uses a scroll that’s someway faster or responsive. I mean you can scroll back while you are already scrolling forward, and after it finishes scrolling forward, it scrolls back.

          • Alvaro

            Well, that site doesn’t work well on Apple computers and that’s what fullpage.js tries to avoid. Also, right not it doesn’t even work for me so I can not check it in windows either.

          • Iwakura

            Ok thanks. I guess I sould try all of this on apple computers too.

  • EmIn

    Hi Alvaro,
    Great Plugin!
    I am trying to install the plugin on a WordPress Child Theme, but the installation failed.
    Any idea what the problem might be?

    • Alvaro

      Yeah, the problem is that fullpage.js is not a plugin for wordpress but a plugin for jQuery. You can not install the plugin in wordpress like a wodpress plugin. You can use it, but you will need to read fullpage.js documentation and apply the needed structure, initialization and loading of resources.

      Documentation available on github: https://github.com/alvarotrigo/fullPage.js#fullpagejs

  • Guest

    Hi Alvaro,

    Is there a way to get more than four slides? In the most basic setup of including the necessary js and css, initializing the plugin then defining 6 sections the last two sections are hidden. Same thing occurs when adding sections to the examples you include on github. Am I missing something simple or is this a limitation of the plugin?

  • manuel leonardo mendez silva

    Alvaro, buenas tardes, estoy implementando tu plugin en una web, y tengo un problema, no puedo crear vínculos dentro de una sección, pues tengo en el inicio de sección una serie de botones que deberían llevarme al contenido de la derecha correspondiente. El problema es que yo descargue la versión anterior a la que se encuentra publicada hoy 28 de noviembre; intente actualizar el plugin pero todo se me desconfigura y ya llevo una gran cantidad de trabajo adelantado.

    Agradezco tu colaboración

    • Alvaro

      Puedes pasarme un link con tu pagina o reproducir tu fallo en jsfiddle?
      No ha habido cambios grandes que supongan ningún problema estructural. Seguramente sea una tontería.

      Si me pasas tu inicialización del plugin o tu web podré ver de que se trata.
      Por cierto, si puedes, plantea mejor tu duda en el foro del plugin en github:
      https://github.com/alvarotrigo/fullPage.js/issues?state=open

      Este no es el lugar ideal para pegar codigo

      Un saludo.

  • Marceline

    Hi Alvaro,

    Wow, what an amazing plugin. I am pretty excited to have found this. I have tried some of the examples and would like to add the vertical navigation dots and the menu on the top to a full background version of your plugin. I have noticed that the vertical dots are triggered in the script. However, I can not sem to get it working. How can I achieve this?

    Thanks so much for pointing me into the right direction!

    Cheers,
    Marceline

    • Alvaro

      Hi, I’m glad you like it!

      I don’t understand very well your question. What is exactly your problem? Can you give me your website to see what’s going on?

      • Marceline

        Hi Alvara,

        You can see my attempt here:
        http://tp-show.nl/fullpage/index.html

        The first page has a full background + top navigation + vertical navigation dots
        The other sections have the gradient background.

        I managed to combine the examples. However the first section and the 2nd section shows a gap at the bottom. How can I removed that?

        Is it possibkle to change the vertical dots in squares?

        Thanks so much for pointing me in the right direction

        Marceline

        • Alvaro

          I’m not sure yet of the cause, but I detected the error. You have to delete the style `position:relative;` from the class `.diapo`.

          About the navigation dots, you could over write the CSS style applied to it, adding it after the `jquery.fullpage.css` file. (#fullPage-nav span) and deleting the `border-radius`, `-webkit-border-radius` and `-moz-border-radius` properties.

          Thanks for the donation! :)

          • Marceline

            Thanks, Alvaro.
            You are a genius and the donation is more than deserved!

  • Marc Debraize

    Hey Alvaro,

    I want to use a ‘slidesNavigation’ like this :
    http://alvarotrigo.com/fullPage/examples/navigationH.html#secondPage

    I set this ‘true’ and the position ‘bottom’ but nothing happens.

    It’s the same thing when I want to use a navigationTolltips like this :
    http://alvarotrigo.com/fullPage/examples/navigationV.html#firstPage

    What’s wrong with what I do?

    Here is the exercise on which I’m stuck:
    http://marcdebraize.com/fullPage/

    • Alvaro

      Download the last version. You are using an old version.

      • Marc Debraize

        Really thank you, you’re always here to give us your help, you’re really nice! :)

  • Christos

    I just want you to thanks you so much!!!! What a great plugin. Saved me a lot of time

    • Alvaro

      Your welcome Christos! :) Enjoy it!

  • Ales

    Hi Alvaro,

    very nice plugin…thank you for that…

    works everywhere except windows mobile 8 (IE)…it just doesnt scroll…it could be because windows phone probably dont allow touch events … tested on Lumia 520 … is there any way to solve it…or just add some condition to turn it on classic slide event, because now it stucks on first slide.

    thank you

    • Alvaro

      I haven’t been able to try it in any windows phone.
      You could try to detect whether it comes form a windows phone or not and initializate fullpage with autorScrolling:false in that case.

      Maybe with this var isWindowsPHone = navigator.userAgent.match(/(Windows Phone)/);

  • Charles Lehnert

    Hey again, Alvaro.

    I’m experiencing an error in version 1.4.6. Only on a fresh open, I can scroll down to the 2nd section with the mousewheel, but then when I try to scroll to the next section, I get this error:

    [Error] TypeError: ‘undefined’ is not an object (evaluating ‘dest.top’)
    scrollPage (jquery.fullPage.js, line 492)
    doneResizing (jquery.fullPage.js, line 854)

    I can, however, navigate to any other section or slider using the buttons. Once I hit one of the buttons after I’ve had this mousewheel issue, I get this error:

    [Error] TypeError: ‘undefined’ is not an object (evaluating ‘destinyPos.left’)
    landscapeScroll (jquery.fullPage.js, line 773)
    scrollSlider (jquery.fullPage.js, line 1048)
    (anonymous function) (jquery.fullPage.js, line 1027)
    (anonymous function) (jquery.fullPage.js, line 547)

    ..but it still navigates to where I would like and afterward, the mousewheel works fine. Do you have any ideas?

    • Alvaro

      Can you show me your site? Or the code you are using?

      By the way, if you are going to add more code, please, use the github issues forum, this comments are not for that purpose:
      https://github.com/alvarotrigo/fullPage.js/issues?page=1&state=open

      • Charles Lehnert

        I’m not able to put it up right now, but I’ll message you privately when it is available if that works for you.

        • Alvaro

          Yeah its fine.

          • Charles Lehnert

            Thanks for figuring this out!
            For anyone else that may have a similar issue: I accidentally had the class name “active” on each section.

  • lê Cường Kiên

    hi alvarotrigo !

    Thank you very much for your great plugin !
    but I see a problem and do not know where to add events .
    in section3 I added a plugin with the following code :

    images scroll horial

    and add this code in the header tag :

    $(document).ready(function(){
    $(“#horiz_container_outer”).horizontalScroll();
    });

    What I want is : when I scroll to the right then section3 effects of fullpage.js mouse wheel stopped working and when rolling the mouse inside the image section3 horizontal scrolling .

    Currently, when I move the mouse to the next section3 and rolling it along the 2 activities : section4 has just rolled scroll inside section3 image.

    Maybe when they stop to section3 of fullpage.js window scroll event , then click the first link in the scroll section3 section4 .

    Very grateful if you could tell me more event stops the mouse wheel event fullpage.js recall how and when to move it to section4 .

    Thanks you men !

    • Alvaro

      I have answered you at the github issues.

      • Kiên Lê Cường

        Ok ! Thank you very much ! hero!

  • gbda

    Hi Alvarotrigo
    Thank you for a great plugin, it truly is superb! Is it possible to scroll up from the first slide? ie slide up to another slide from the slide that appears on the landing page? I would like to be able to scroll up to another slide with contact details from the home page (slide) if you see what I mean

    • Alvaro

      It is not possible right now. I might have a look as some other people have asked for the same feature.

      • gbda

        Thanks for getting back to me : )

  • David Carberry

    Hi Alvaro

    Incredible work, thanks for sharing. Was just wondering, is this plugin compatible with the ‘Foundation framework? I’m trying to implement it in to a site I’m building with ‘Foundation’ but it doesn’t appear to be working. I’m not sure if there some code that is conflicting with it. Just wanted to see if yourself or anyone else was having any similar issues, any help would be great

    Thanks

    David

    • Alvaro

      Foundation is just a front end framework, it shouldn’t be a problem as far as you follow the needed structure and you include the needed files as specified at the documentation.

      If you give me the URL of your site i can take a look at tell you what’s wrong.

      • David Carberry

        I’ve tried incorporating the full page plugin within the foundation framework but unfortunately it doesn’t appear to work as responsive like it was before. I’m not sure if it’s just a problem with the syntax, if you could have a look, that would be great!

        Heres the link: http://www.davidcarberry.com/HTML_Hybrid/index.html

        Cheers

        • Alvaro

          It works well in chrome. Looks like it doesn’t work well on IE 9, check your javascripts. Try deleting some and play a bit with that. Something looks to be wrong.

          • David Carberry

            I’ll try removing some of the js, appears to be so many different scripts. Is it possible to make a responsive site using this plugin?

          • Alvaro

            What do you mean with a `responsive site` ? Remember you can still using any CSS you want, such as media queries for images etc.

  • Adrian Tschubarov

    Alvaro

    This is fantastic! I have a very simple suggestion, easy to implement and very cool:

    Context: when you have long pages, scrolling back all the way to top use to look ugly. the idea is this:

    When you reach the last section, section number 1 is duplicated at the end, so you scroll that until the bottom and on finish scrolling it jumps directly with no animation to the real first section

    What do you think? it is the same way the game backgrounds scroll infinitely.

    Saludos! Adrian

    • Alvaro

      Hi @49ca1ea18449af01e189d6a3deb3b4cd:disqus I’m glad you like it!
      There’s an option which loops and ends up doing kind of the same. The time to go from the last slide or section to the first one again is exactly the same time you need to go from one slide or section to the other and therefore is not such a big deal.

      Thanks anyway for your suggestion!

  • vini

    Hi Alvaro,

    This is a great plugin and even with my limited experience in web development this plugin makes
    my website look amazing. definitely deserves a donation.

    I’ve stumbled across a problem and have been struggling with it for some time now. My website looks
    and works fine in google chrome, firefox, safari but doesn’t seem to scroll in
    Internet explorer. I know the plugin is compatible with IE, but for some reason
    (i’m sure it is a minor fix and I’m not looking hard enough) the page doesn’t
    scroll.

    Here is my website
    http://app.photodrive.me

    Thanks

    • Alvaro

      Thanks, I’m happy you enjoy it :)
      Please, download the last version (1.4.7) as the one you are using didn’t have a fallback for jQuery if you were using the option `css3: true`

      • vini

        thanks Alvaro,

        latest version did the job. :-)

  • Slade Andrew

    Hi Alvaro

    I am looking at implementing this in a new site I am building and just want to ask a question about functionality.

    Is if possible to have just the content scroll leaving the header and footer as they are and without going to a new page?

    The page I am building is completely dynamic and is data driven so I do not know how big any one page would be. I hope to control the size of pages by pre-loading data and only loading new data as it is needed.

    • Alvaro

      If you take a look at the examples you will realize there is already one example about that: http://alvarotrigo.com/fullPage/examples/fixedHeaders.html

      Anyway, you will probably have troubles adding data dynamically. The plugin needs to know the size of the content to create the scroll or not. You will probably need to cheat a bit such as calling the resize event on every request to the server.

      • Slade Andrew

        Thank you Alvaro, I will take a look at that example and if I have anymore questions come back to you.

        Otherwise I think it is a fantastic plugin.

        • Slade Andrew

          ReferenceError: jQuery is not defined @ jquery.fullPage.js:1134

          Any ideas why

          • Alvaro

            It seems you are not adding the jQuery library. Take a look at the examples or at the documentation in order to see which scripts to import and in which order.

      • Slade Andrew

        Hi Alvaro

        I have now got it working with dynamic content and it is very smooth. Found out why my jQuery library was not loading so all in all a great plugin.

        Do you have a place where perhaps I could donate something for it?

        Thank you again for this plugin.

        Regards
        Slade

  • Денис Гучев

    how to make mousewheel horizontal scrolling&

    • Alvaro

      I am afraid it is not possible with the plugin right now.

  • matesasesinos

    hi, great work! i have a question… This plugin supports css3 effects? transitions do not work :(

    • Alvaro

      Yeah it does. Just the css3 option. There’s a fallback for jQuery.
      Which transitions doesn’t work? You can see them working in this example: http://alvarotrigo.com/fullPage/examples/apple.html

      • matesasesinos

        thanks Alvaro, must be my cra* code, thanks again… :D (great work again)

  • MyThoughts

    Instead of a background color in each section, is it possible to use a background image?

    • Alvaro

      If you take a look at the living examples you will realise there’s also an example of that, even on the download folder of the plugin: http://alvarotrigo.com/fullPage/examples/backgrounds.html

      • MyThoughts

        OK. Found that. Now I copied the files exactly and just pointed to my own .jpg background images to try and get a handle on things work. All images are the same size and resolution. The images in the SECTIONS look fine However, the images in the SLIDES are smaller and tile when I adjust the browser window size. Why is this?

        • Alvaro

          If you don’t give me a link to your URL or a way to reproduce it somehow, I can not know where the problem is.
          Anyway, as you can see, in the living example it works well. You might be doing something wrong. Probably you forgot to add the CSS styling for those slides…

          • MyThoughts

            I have no way of currently posting the site online. I might have in the bext day or so. But here is EXACTLY what I did. I have wiped out my files and repeated with the same result twice

            1) Downloaded the entire fullPage.js package from github to my local machine.
            2) Opened the file “backgrounds.html” with Adobe Dreamweaver and previewed the site in Firefox and the files and images work fine.
            3) Replaced the image files “bg1.jpg, bg2.jpg, bg3.jpg, and bg4.jpg” with my own 4 identically sized and resolution files “bg1.png, bg2.png, bg3.png and bg4.png”
            4) Now when I preview in Firefox, the images on the slide pages are tiled and aren’t expanded to the full screen size. I didn’t change anything in any file EXCEPT to change the name of the image files referenced in “background.css”.

          • Alvaro

            It sounds like you are not applying the background-size: cover; in the slides somehow.

          • MyThoughts

            OK – I have the site up temporarily at stagecraft.org/msi/. I’ve backed out a bit as I got lost trying to implement the background images. What I want is to keep the site just like it is now, but instead of background colors I want background images. I don’t want to change any current text styles, alignments, current foreground images, etc (I’ll modify those after I get bg images working). In essence, I need to just add the code to pull in background images at full size. How should I best proceed?

          • Alvaro

            Thanks for the link, but it would be much more helpful if you keep the images you were working with to see the source code and detect the problem.

          • MyThoughts

            I trashed that file as it was completely messed up. Plus what I have now online is not the same as what I was working on. I was trying to adapt the background.html file to include the features of the current index.html file on my site – and I realized that doing so would be more changes than just adding the bg images to index.html. I wish there were 2 samples files exactly the same EXCEPT for one with bg colors and one w/ bg images so they could be compared. I am enough of a novice that I am getting lost in all the other CSS changes between the two pages and can’t zero in on what part pertains to just the bg images.

          • Alvaro

            If you get lost adding a background image to any element, I would recommend you to ask your questions in http://stackoverflow.com/ where they will help you much better than here.

            But anyway, I would try to understand the CSS contained in the backgrounds.html file.

  • sandra

    Quick quesiton re: http://www.jennbeaupre.com/jb/index.html

    I am not great w/ j query.

    moveToSlide

    Scrolls the page to the given slide anchor name or to the given index.

    /*Scrolling to the section with the anchor link `firstSlide` */
    $.fn.fullpage.moveToSlide(‘firstSlide’);

    /*Scrolling to the 3rd section in the site*/
    $.fn.fullpage.moveToSlide(3);

    could I use this / and how, to automatically scroll betweend the verrtical slides?

    thank you!!!

    • Alvaro

      Just as detailed in the documentation, just with a call like this: $.fn.fullpage.moveToSlide(‘firstSlide’);

      But if you want to do it with the menu, then you just need to link the anchor links as detailed in the documentation. Take also a look at the examples online and its source code.

      For more info about how to use javascript, I´m afraid this is not the place to ask.

  • m

    hi. got problem with slides. i have this meta tag — meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no” — and Your script has problem when You want to scroll to last slide it just skip it and slides to first slide. can You look at this?

    • m

      i’ve noticed that it’s not working properly only on mobile devices held vertically

    • Alvaro

      If you don’t give me a link to your site I can not guess what your problem is about. I need the javascript code you are using as well as the HTML markup. If you want to post it instead of your link, just use github forum for it:
      https://github.com/alvarotrigo/fullPage.js/issues?state=open

      • m

        ok. my mistake:) layer on one slide was wider than devide width and it didn’t slide properly

  • Max Methot

    Hi Alvaro,

    Nice plugin by the way, makes websites really fun to navigate!

    I have one problem for which I can’t figure out how to solve it.

    I almost copy-pasted the code in the example in my web application (ASP.NET) as you’ll see, but the content of the page doesn’t load properly, unless I resize the browser window (Chrome and Firefox, IE works OK).

    Example: http://portail.chronometriq.ca/Process.aspx

    Have you encountered this before? Do you know what causes that behavior and how to make it load properly?

    Thanks in advance!

    • Alvaro

      You are not following the needed structure. Remove the wrap around the sections and let me know how it is working. Your problem is that the plugin is assigning a huge height to each section.

      • Max Methot

        Thanks. I removed the wrapping and an unused javascript function and it started to work again. Thanks for your help and again, great plugin!

        • Max Methot

          Haha, the text editor automatically closed the div tag I wrote there, funny!

        • Alvaro

          Your welcome! Enjoy it!

  • egored

    Muy bueno Gracias por compartir el Proyecto

    • Alvaro

      @egored:disqus de nada! Que lo disfrutes! :)

  • Andrew

    I have a section with a menu that navigates through horizontal slides. Is there a way to add an “active” class to the anchor corresponding with the active slide? I know just enough JS to get plugins working the way I want, so if the functionality isn’t built it, how would I add it using a callback?

    • Alvaro

      That functionality is already defined. Just take a look at it at the living example: http://alvarotrigo.com/fullPage/#secondPage
      The active slide will have the active class.

      • Andrew

        Hey, thanks for getting back to me. I’m looking for a way to add the active class to the anchor element in the menu itself. I have it working for the main navigation (where each anchor corresponds to a vertical section), but I have a submenu in one of the sections for navigating through the horizontal slides of that section. The active slide has the active class, but the anchor in the submenu doesn’t.

        • Alvaro

          Ok, then you could make use the callback `afterSlideLoad` to add that class to the element you want. You could add inside it something like `if(index == 3 and slideIndex == 2`){ $(“#menu3″).find(“.submenu2″).addClass(‘active’); }” and then something to remove the old “active” menu or submenu.

          This is not place to add code, if you want to keep asking on it, please use the github forum: https://github.com/alvarotrigo/fullPage.js/issues?state=open

  • SweNz

    Hi Alvaro,.
    I have a problem about background image resizing when viewport(browser) was resized.
    Can you give me some advice to resize background image fill to current viewport?
    I don’t care about image aspect ratio.
    here is my pilot site : http://www.swenz.com/rd/
    Btw, this is a superb component. thank you in advance.

    • Alvaro

      First advice: use lighter images, yours are huge and take time to load.
      Then, just take a look at the css property background-size: http://www.w3schools.com/cssref/css3_pr_background-size.asp and play a bit with it.

      You may want to apply: background-size: 100% 100%;

      • SweNz

        Big thanks Alvaro ! I’ve so much to learn.

  • MyThoughts

    New question. I don’t see an answer in the docs or demos. Can horizontal navigation dots have “tool tips” assigned?

    • Alvaro

      @disqus_bIz8Rb34B7:disqus not right now. I will add it on the list of things to do.

      • MyThoughts

        That’s fine – I appreciate the response. Was just wanting to be sure I wasn’t missing it somewhere.

  • Bruno

    Hi Alvaro

    The plugin is greate, and the site works really fine, but when I load at first time no anchor works, I click in some anchor and don’t move, I need to reload the page, and then without any interaction, move to the first click I give before reload the page…

    Did you know why is happening this.

    Regards
    Bruno

    • Alvaro

      @disqus_43MnATKDZ7:disqus you just need to update your version of fullpage.js. Download the last version. That bug was already fixed.

  • George D. Elgyn

    Hi, is there any way to show the contents of the slide on the left and right instead of arrows?

    • Alvaro

      There’s no such option, I’m afraid.

      • Dave B

        Not sure how cross browser compatible this is, but playing with firebug I found this to work. Change Slides (id=Slide1, id=Slide2 etc) to 48% width instead of 50%. Then set margin-right of the first slide to 2%, and margin-left of the other slides to 2%.

        That should reveal the next slide

        Then you can probably play with .controlArrow to make it cover the full height and width of the area being revealed (use opacity to make it invisible).

        I’m sure there are better ways, but 5 minutes of playing with firebug created some quick results

        • Alvaro

          The with depends on the number of slides. If you have for slides, for example, the with would be 25% for each.

  • hamburger

    Hi, what do you think about an “elastic-mode”-feature.
    If you scroll only a bit it moves back to the origin. Only if you scroll a defined value down it moves to the next slide.
    It will be a great feature for design-freaks.
    Cheers hamburger

    • Alvaro

      I hamburger, that would be cool. I’m open to any contribution for it :)

  • JP

    Great job Alvaro!
    I have a question.. is there a way to prevent scrolling in onLeave?… or in other place just before new section is loaded.
    I’d like to let the user scroll forward only if the condition is TRUE.

    • Alvaro

      Hi JP, I’m afraid there´s no way to do that right now in the plugin.

      The only way would be modifying the plugin as detailed in this post of the forum: https://github.com/alvarotrigo/fullPage.js/issues/136

      • JP

        Thanx. I’ll try doing something similar. I want to disable scrolling down, but not up… just like in wizard (select the checkbox to go further).

        • JP

          I’ve found there is a way right now. If you don’t want to let the user go forward, you just have to remove the class “section” of the next section. And then add it when he does what you want.

          • Alvaro

            Nice to know you found a solution for it! :)

  • Stachu Korick

    Great stuff! Definitely something that needed to be easily available, and surprised that it wasn’t before. Keep up the good work!

    • Alvaro

      Thanks a lot! I will! :)

      • Stachu Korick

        This is super late, but btw used this for stachu.net/resume/hireme a while ago

  • MYLIFEFACTORY

    Hola Alvaro, estoy intentando incluir un al inicio en el html del index pero funciona en parte, pues no aparecen las flechas para la navegación horizontal y por lo tanto las slides no parten. Hay que modificar algo de la funcion $.fn.fullpage o simplemente el css del jquery.fullpage ?? Gracias

    • Alvaro

      El iframe debería estar contenido en la primera sección o si quieres que aparezca en todas usar la opción fixedElements.

  • Cheeseburger

    I’m having issues implementing this in a WordPress theme I’m developing. Any tips?

    • Alvaro

      If you follow the needed HTML markup and you include the files correctly there’s no reason why it shouldn’t be working.
      Just remember that this is not a wordpress plugin, but a jQuery plugin.

  • Alejandro Bernal

    Hola Alvaro
    Oye estoy utilizando tu plugin con la opcion de background
    Pero me gustaria saber como es posible hacerle para que la imagen de fondo en las secciones o slides, se muestre el tamaño completo de la fotografia, no quiero que se corte, o se haga más grande, cual seria la mejor opcion para eso, se puede modificar en el CSS? o cual es la medida optima para usar en las imagenes? Gracias!

  • RitwikDutta

    Hello Alvaro,

    I’ve set up your (amazing) plugin, and it’s been working perfectly so far, except for one problem – I cannot seem to modify the images used for the control arrows. If possible, could you help me?

    Ritwik

    • Alvaro

      They are not currently images but just CSS styles. Anyway, what you need is just to overwrite the styles ..controlArrow.next and .controlArrow.prev and add a background image to them.

      If you don’t know how to do that, I would recommend you to ask on http://stackoverflow.com/ as this is more a matter of CSS rather than about the plugin itself.

      Cheers!

      • Ritwik

        Thanks for the help! Also, just wanted to say, your plugin is pretty awesome.

        • Alvaro

          Your welcome!
          You can also take a look at the websites using fullpage.js listed on the documentation such as this one http://rockercreative.com/#stackexchange and take ideas from their source code.
          I recommend you to use Chrome inspector or Firebug for Firefox to inspect elements and see their styles.

          • Ritwik Dutta

            Hello again,
            I have a small problem. I have two divs floating left and right, but since they have different contents, they render with different heights (I cannot have a fixed height because on different devices the percentage changes). I am jQuery to do, $(‘#div1′).height($(‘#div2′).height());, but my changes are being overwritten.

          • Alvaro

            You should do those changes inside the `afterRender` callback. Otherwise the plugin will overwrite some things while creating the needed structure of the site.

    • MyThoughts

      I came here with just the same question – but just wanting to change the arrow color for now. Found where you can change it in the file “jquery.fullPage,js”. Line #26: ‘controlArrowColor': ‘#fff’,. Just change the color code. As for replacing the entire image, that’s beyond me at the moment.

      • Alvaro

        As I said, I recommend to overwrite the CSS styling rather than dealing with the javascript. I would forget about the line 26 and the option controlArrowColor (which is not even documented as I believe styles should be treated on the CSS stylesheet).

        Just create a new stylesheet and do whatever you want to do with the styles .controlArrow.next and .controlArrow.prev. If you include if after `jquery.fullPage.css`it will overwrite the default styles.

        • MyThoughts

          OK. Tried that. I can get the new “arrow” images to appear – but the old white ones are there as well deformed by the new arrows “squishing” them. My CSS is called after the fullPage CSS but it is not over writing. See http://www.stagecraft.org/msi/millwork_portfolio.html. THe new red arrows are there – but the white ones are there as “trapezoids” too.

          • Alvaro

            Because you are not overwritting the border property. Just set border:0; Anyway, as I said, this is a matter of CSS knowledge rather than of the plugin itself. I would recommend you to ask these kind of question is http://stackoverflow.com/

  • XtineBen

    It’s a fantastic plugin.
    Thank you !
    Is there a way to get the navigation links to work in Internet Exporer 7 ?
    The scroll works with the trackpad and mousewheel, but not on clicking ton the links.

    Any suggestion or alternative ?

    • Alvaro

      I’m afraid IE 7 can not handle this plugin. It is like 8 years old and many things have changed since then :)

      Good luck!

      • XtineBen

        Yes, I know !
        Unfortunately it’s still there :-(

        Thanks anyway for your answer and sharing your work.

  • XtineBen

    Another question, more up to date ;-)

    I cannot zoom to enlarge the text on the ipad or iphone.
    Is it normal ?
    Is there a way to do it?

    Thanks
    The zoom to minify the text works, it’s a bit small, though.

    • Alvaro

      It will detect a movement and scroll. The only way would be tapping twice.

  • ShuckinJiver

    Hello – awesome plugin! Thanks. I have a question regarding linking two menu items to the same section. Is this possible? For example if i want to split one section in two and have two menu items go to the same section. In my case i have a retailer and footer area within one section but want a separate link to each of those sections in my menu.

    Thanks!

  • Fabien

    Is there any documentation on how normalScrollElements works? Particularly with a div expanding beyond the screen view?

  • sanjeev9696

    Hello Alvaro.
    You are really awesome.
    Can i know how can we add full screen background slideshow and videos in slides.
    Your reply would be great.

    • Alvaro

      You have a living example with fullbackgrounds in which you can see the source code used for it. It is mainly about using CSS: http://alvarotrigo.com/fullPage/examples/backgrounds.html

      Regarding the videos, that’s a bit more complicate. Once you know how to create a full screen video as a background, then you just have to play it on the afterRender callback.

      In order to know how to create the full screen video I would recommend you to ask in http://stackoverflow.com/ as it is not directly related with the plugin.

  • valerio

    Hola Alvaro!

    Great Plugin!
    I have a question for you:
    Can I change the direction for the slide? Instead of right, set to the left. If not, can I change the initial slide for a section?

    Thanks

    • Alvaro

      Hola Valerio,

      The answer to both questions is no. I´m afraid.
      Why would you like to change the first slide for a section? I didn’t understand this very well.

      • Valerio

        Because I want to change the direction. In my website the slide 2 is the detail of the slide 1 (which is the main slide), and I want the detail appears sliding on the left.

        • Alvaro

          Valerio. It is not possible with any option. I’m afraid.

        • Alvaro

          What you could do maybe is modifying the plugin, adding a public function `scrollSlider` and then call it on the `afterRender` callback so the slides would be sliding on the background if the slides you can to move is not in the first section.

          You have a similar issue here at the forum:
          https://github.com/alvarotrigo/fullPage.js/issues/129

          Good luck!

  • earl

    Hello Alvaro,
    great plugin. Thanks.
    Is it possible to disable the “controlArrows”, so i can use the methode “moveTo(section, slide)” or better a methode like “nextSlide/prevSlide”?
    Thanks earl

    • Alvaro

      You can do it with CSS adding the property `display:none` to the `.controlArrow` class.
      Remember you can overwrite any CSS as well.

      • earl

        Thank you.

  • sanjeev9696

    Hello Alvaro
    How to Do this?
    I doesn’t need header and footer in first section.
    I need header and footer from second section.

    • Alvaro

      Just use absolute positioned elements instead of fixed ones.
      If you don’t know how to do this you should ask your questions in http://stackoverflow.com/ wher they will help you better than here.

      • sanjeev9696

        Thanks for the reply. You are great.
        Can we auto slide the section slides.

        • Alvaro

          You can do many things. You just need to know jQuery and have a bit of imagination :)
          You just need to use the callbacks and methods offered by the plugin.

          This question was already asked in the forum. Take a look at it:
          https://github.com/alvarotrigo/fullPage.js/issues/106

  • tester

    a couple of bugs: section 1 with slides A and B, section 2 with slides X and Y. I’m in the slide A, if i go down to slide X (from section 1 to section 2) i get the leave event of the X slide, not of the A slide as expected… and direction is right… not correct! (2nd bug)

  • tester

    /**
    * Retuns `up` or `down` depending on the scrolling movement to reach its destination
    * from the current section.
    */
    function getYmovement(destiny){
    var fromIndex = $(‘.section.active’).index(‘.section’);
    var toIndex = destiny.index(‘.section’);

    if(fromIndex > toIndex){
    return ‘up';
    }
    else if(fromIndex toIndex){
    return ‘left';
    }
    else if (fromIndex < toIndex){
    return 'right';
    }
    return null;
    }

  • Joseph Chong

    is it possible to cancel vertical align of the text? I am trying to create a phonegap app with it

  • Jon

    Hi, I’m really enjoying your plugin but I’m having some trouble adding functionality on top of it. Is it possible to use a lightbox plugin, like fancybox, with yours. It seems like your code is overriding something in even the most basic of jquery image viewers or galleries I have tried to install. Let me know if you can help.

    Thanks!

    • Jon

      Nevermind, I’m an idiot, I was running it all locally still. Working fine now. Thanks!

    • Alvaro

      @disqus_03hoKqZ8OY:disqus it is possible. As pointed out in the documentation, you will need to use the callback `afterRender` to apply the plugin.

      • Jon

        I figured it out just before your response but thanks so much for your quick reply

  • Lukas

    Hi Alvaro, I have a big problem with it I’m forcing for 2 days.

    I simply use your plugin (add jquery.slimscroll.min, jquery.fullPage, jquery.easing.1.3) and add in js $.fn.fullpage(); and now my page not scrolling down. Mouse scroll as also keyboard arrows didn’t work.

    What may be the reason ?

    Best Regards.

    • Alvaro

      I can not know as I can not see your code. Please post a link to your URL or try to reproduce it on http://jsfiddle.net/.

  • ilya

    Hey – I’m trying to get the full screen background image to scale with the browser/screen size. I thought I’d try and implement something like https://github.com/srobbin/jquery-backstretch – any knowledge to be dropped on how to achieve this? Thanks!:)

    • Alvaro

      If you are using the last version of the plugin and using the same method as showed in the backgrounds demo page, then you shouldn’t have a any problem. The backgrounds scale with the window’s size as you can see here: http://alvarotrigo.com/fullPage/examples/backgrounds.html

      It is all about CSS3. You can see the used code in the source code of the example.

      • ilya

        Hey – thanks for getting back to me :)

        Yup, that seems to work brilliantly for the section backgrounds, but not for the actual slides. Any way for the slides to function the same way with images as with the section background?

        Thanks again!
        ilya.

        • Alvaro

          Well, if you take a better look to the backgrounds demo I already posted, you will notice there are backgrounds in the slides as well:

          http://alvarotrigo.com/fullPage/examples/backgrounds.html

          • ilya

            Thanks again. All good, worked it out. Apologies, am teaching myself all this now so it’s a little bit foreign at the moment. If you know any good resources to inject some knowhow into me on CSS3 – that’d be great.

            Thanks!
            ilya

  • fabianadipolo

    Hola Álvaro,

    He estado usando tu plugin y me parece genial. Sin embargo, estoy tratando de lograr una navegación un poco más compleja que incluye varias secciones verticales al igual que varias secciones horizontales. El plugin soporta varias secciones horizontales. Mi pregunta es la siguiente, ¿teniendo la primera sección horizontal, es posible que en la segunda lámina (horizontal) pueda también tener definida una navegación vertical distinta a la de la primera lámina?

    No sé si me explico. Como ejemplo está esta página http://ngm.nationalgeographic.com/serengeti-lion/index.html#/black-mane. Fíjate que al hacer clic en el botón Look de cualquiera de las lámina horizontales se activa una navegación vertical distinta.

    Cualquier ayuda que puedas prestarme es útil.

    Gracias de antemano!

    • Alvaro

      Hola Fabian,

      Siento decirte que no es posible tal y como está estructurado el plugin. Lo más cerca que podrías llegar a estar de esa página sería crear sliders horizontales en todas las secciones y que cuando se mueva cualquiera de ellos, se muevan los de el resto de secciones también.

      Esto se podría lograr con callbacks que ya existen como ‘onSlideLeave’ y un par de funciones para mover los sliders horizontalmente.

      Suerte!

      • fabianadipolo

        Álvaro muchísimas gracias por tu pronta respuesta.

        He estado intentando lo que me comentas y solo tengo un problema: ¿existe alguna forma de mover los sliders sin que haya una transición como tal? Es decir, la función que veo para mover los sliders horizontalmente es moveTo, pero esta hace una transición que, para lo que estoy tratando de lograr, no es correcta.

        Me explico, quisiera que cuando me muevo horizontalmente por el primer slide, automáticamente (sin que el usuario se de cuenta) el slide de la segunda sección se moviera hacia la siguiente lámina y que el usuario la vea solo cuando haga scroll vertical. ¿Es esto posible tal como está estructurado el plugin? ¿Alguna sugerencia?

        Gracias de antemano! Saludos!

        • Alvaro

          `moveTo` no te servira. Lo que tienes que hacer es mover los sliders de otras secciones sin que el usuario se de cuenta de ello. `moveTo` movera al usuario a otra secion/slide. Necesitarias crear una funcion como la que se comenta en este tema: https://github.com/alvarotrigo/fullPage.js/issues/129
          Podrias evitar la animacion creando una animacion muy rapida, es decir, de 0 segundos. Para ello tendrias que usar `css3:false` y crear una nueva funcion como se comenta en este otro tema: https://github.com/alvarotrigo/fullPage.js/issues/92

          Tendrias que llamar a sea funcion antes de mover los sliders con $.fn.fullpage.setScrollingSpeed(0); y otra vez despues restaurando el valor normal $.fn.fullpage.setScrollingSpeed(700);.

          Esto no funciona con css3:true puesto que la velocida de la animacion se define ahi desde la hoja de estilos CSS con la clase .easing. Podrias crear otra clase y modificar el plugin para que la anada en su lugar tambien.

          • fabianadipolo

            Álvaro, nuevamente gracias por tu respuesta. He hecho lo que me comentas. Definí css3:false, coloqué la función scrollSlider como pública, definí la función setScrollingSpeed y en el evento onSlideLeave definí lo siguiente:

            var section2 = $(‘#section1′);
            var section3 = $(‘#section2′);
            $.fn.fullpage.setScrollingSpeed(0);
            $.fn.fullpage.scrollSlider(section2, 1);
            $.fn.fullpage.scrollSlider(section3, 1);
            $.fn.fullpage.setScrollingSpeed(1000);

            Lo que estoy tratando de hacer aquí es que cuando me desplazo de la primera lámina del slider de la primera sección a la segunda lámina, que se quede en esa lámina / sección (en la sección 1, lámina 2) y que mueva (sin que el usuario lo note) el slider de la sección 2 a la lámina 2 y el slider de la sección 3 a la lámina 2. Esto lo hace pero me desplaza a la lámina 2 de la sección 3 :s

            Es decir, en vez de dejarme en la sección 1 en la lámina 2, me desplaza a la sección 3 a la lámina 2. ¿Debería llamar al final a la función scrollSlider para que mueva nuevamente a la sección 1 lámina 2?

            De antemano, disculpa la molestia pero estoy un poco trancada en este punto.

            Saludos!

          • Alvaro

            Abre un tema en el foro: https://github.com/alvarotrigo/fullPage.js/issues?state=open

            Este no es sitio para poner mucho codigo. Necesito ver como llamas al callback o tu URL si es publica para avanzar mas rapidamente.

            Un saludo.

          • fabianadipolo

            Gracias Álvaro, ya posteé en el foro la pregunta https://github.com/alvarotrigo/fullPage.js/issues/180

            Saludos!!

  • David Anderson

    Hi Alvaro,

    I love your plugin and am now using it on a second site. I am running into one roadblock. Is it possible to add a div below the sections? Specifically, what I am doing is having three sections, one with slides, and then below all of it I want a footer to appear if scrolled down to. Or is it possible to set the height of a specific section to a px value? Thank you for any help you can provide.

    • Alvaro

      There’s no option in the plugin to deal with that, but you could use the `afterRender` function to set the height of the section you want.
      Keep in mind that some things might not work properly as the overflow scroll bar. I haven’t tested it.

      Also, you would need to set the height of the div on the resize event and executing it after the plugin event fires.

      This might do the job, but as I said, I haven’t tested it: http://jsfiddle.net/Em6LX/4/

      • David Anderson

        Thank you very much.

        • Kayla Domeyer

          David, did you get this to work? I’m trying yo do (I think) the same thing. Show the 8 or so sections, but when a user hits the bottom of the page, show a footer.

          I’ve implemented the script from the fiddle, which is successfully resizing the footer section to 200px high, but the window will not scroll to it. I can see the div is there in the inspect window, but it is below the viewport with no way for me to move to it.

          Any thoughts would be very much appreciated.

          The Link: http://gilsongraphics.com/kayla_test/#fulfillmentpage/2

          • Alvaro

            You could use the method `$.fn.fullpage.setAutoScrolling(false)` when reaching the last section (by a callback afterLoad, for example) and then turn it on again (true) when moving up again.

  • suresh9696

    How to disable mouse scroll down events. Please provide a code for disabling mouse scroll events. i tried a lot. please help out.

    • Alvaro

      @suresh9696:disqus if you download the last version you will see a method called `setAllowScrolling` which is used to allow or disallow scrolling (now working under touch devices as well).

  • mosale

    hello you can manage verticalCentered only for certain sections?

    • Alvaro

      You can define a style for the sections in which you don’t want to use verticalCentered.
      You need to overwrite the style for the .tableCell class.

      For example, if you are using id=”section1″ for the first section and you want to avoid verticalCentered on it, you should create this stye:
      #section1 .tableCell{ display:block }

      And remember to add it after including jquery.fullpage.css

      • mosale

        thank’s!

  • MJ

    Hey there! I’ve been trying to change the color of the slide nav elements. Would like to change the color of both the border and the background when active. Tried to change in both the jquery.fullPage.css and in the js file without success. Any ideas?

    • MJ

      Maybe I should add that it is the horizontal slider navigation I am trying to make changes to. Apart from this everything works great and was super simple to implement!

    • Alvaro

      You just need to overwrite the styles in jquery.fullPage.css. You can do it by changing them there or by creating another style sheet and adding it after including jquery.fullPage.css.

      The styles you need to overwrite are two:
      #fullPage-nav span, .fullPage-slidesNav span{
      }
      #fullPage-nav li .active span, .fullPage-slidesNav .active span{

      }

  • Maria Goltsova

    Hi. I love your plugin. I only use it on the front page and it works great! But other pages do not scroll at all when viewed on mobile devices (desktop is fine). The website is http://www.goanna.ru. I tried everything i knew but could not find a solution. Any advice would be highly appreciated. Thank you!

    • Alvaro

      I’m glad you like it :)

      I’ve tried your site in iPhone 5 and it works good. It takes long to load, but it works well. You might encounter problems with Windows 8 touch devices and other devices which doesn’t support the fixed property that you are using for your backgrounds.

      • Maria Goltsova

        Did you try http://www.goanna.ru/toys. ? This is one of the pages I’m having issue with, on iPhone and android both. Thank you.

        • Alvaro

          That section is not using fullPage.js for anything. You should not initialize the plugin.

          Anyway, that’s not related with this plugin. It might be a problem of any other plugin or script you are using for that gallery.

  • raint

    Hi Alvaro, Love the plugin. Is there any easy way to preserve the font size when resizing the browser? Please have a look on this http://d.pr/i/hJD8

    • Alvaro

      Use the option `resize:false`.

      • raint

        my bad. I should read the docs carefully. thanks for answering this silly question

  • Tiago Fernando Centa

    Hi, Alvaro. It is possible to change the section to scroll horizontally instead vertical?

    • Alvaro

      No. You could use a website with only one section and many slides if that’s what you want. The only difference will be that the mouse wheel won’t scroll through them and that the menu will be not that simple to implement (you would need to use callbacks).

      • Tiago Fernando Centa

        I’ve tried to use the slides, but the hash links will be allways the same with the number of the slide changing only, so you think that is better I use another way?

        • Alvaro

          You can use `data-anchors` or the slides as well as specified at the documentation: https://github.com/alvarotrigo/fullPage.js#using-anchor-links

          • Tiago Fernando Centa

            Nice, Patrick. I’m trying this way, but have one issue when I click on menu and after click on the arrow the menu stops work. Have seen this?

          • Tiago Fernando Centa

            Should I post this on the forum?

    • Tiago Fernando Centa

      Question solved. Nice plugin, Alvaro. Thanks for your patience and support.

  • Patrick K

    Hi Alvaro, great plugin! Pulls of everything I wanted for my site. Css for section, section1 and wrap are as in your original. I am now trying to insert a centered two column style in the sections placing one div to the right and one to the left. Like this:

    Heading for me
    Text text text.

    When I try to float them left and right the positioning of the scroll navigation (#fullPage-nav) gets distorted and it pops into the middle of the page. I have been into the jquery css file and can’t wrap my head around why the floating of my two divs is overriding the fixed positioning of the navigation. Any ideas how to pull this off?

  • Alex

    Hi Alvaro, first i must say i love your plugin—an amazing work. I’m planning to use it for my new website.
    But after testing it, two questions remain:

    1. Is it possible to use this plugin with an off-canvas menu (like “mmenu” or similar)?
    2. Is is possible to give the slides a active class (like the sections) so that they can also be displayed in the menu?

    … and a little suggestion for upcoming versions:
    I think it would improve the usability if the plugin starts the autoscroll with a little delay.
    i.e.: The user must first scroll about 100px before the plugin begins to scroll if not the plugin “snaps back”.

    • Alvaro

      Hi Alex, I’m glad you find it useful.

      1) I guess so. Many things are possible :)
      2) Slides already have an active class. Just inspect the DOM to see it. You could use callbacks to deal with any menu you want, such as “afterSlideLoad”

      The resistance topic has already been treated on the github forum but it is not that simple to implement due to different behaviors of the mousewheel and the operative system.

  • stefanalexandru

    Hi alvaro, great plugin. I’m thinking about using it in a project of mine but i always think way into the future so i’d like to ask you something. Let’s take this demo http://alvarotrigo.com/fullPage/examples/navigationV.html as an example [but with more slides].

    Eg: User lands on the website, the first thing he will see is the 1st slide. User will scroll to the 5th slide while passing through 2nd 3rd and 4th slide. Now the user would like to go back to slide nr. 1. He clicks on the navigation and up he goes. But he goes from 5 to 1 while passing through 4 3 and 2 really fast [the effect is not really nice to watch if we take an example with even more slides]. So i would very much like to get from 5 to 1 after i pressed the navigation directly. I was thinking of doing this by removing the slides 4 3 and 2 and then start the animation twords the 1st slide, then put the slides 2 3 and 4 back in their place. Could you implement a method in your plugin that would do this from the navigation ? Thanks

    • iamMartinDavies

      I’m looking for a similar way of using this great plugin, where the user doesn’t see the slides in between. Any help you could provide Alvaro would be greatly appreciated.

      Thanks,

      • iamMartinDavies

        It looks like a similar request was made on GitHub awhile back:

        https://github.com/alvarotrigo/fullPage.js/issues/74

        • Alvaro

          I suggest you to adopt the solution suggested in that post. Create a method called setScrollingSpeed and make use of it.

          You can set it to 0 when you want to avoid the transitions. Then set it back to normal by using some callback.

          • iamMartinDavies

            Thanks, I’ll take a look. Great place to start.

    • Alvaro

      You could do it by changing the scrolling speed when someone clicks on the menu.
      For that you would need to modify a bit the plugin and add a public method for that. Then, using the callback afterLoad you could change the speed back to normal.

      Here’s the function you would need to create:
      https://github.com/alvarotrigo/fullPage.js/issues/92

      • stefanalexandru

        I shall take a look into that. Thanks for the input. Hope you could make this a native option in a future version of the plugin.

  • ester

    Hola Álvaro!!
    tu plug-in es fantástico, si al final lo utilizo para mi web la donación está asegurada. ¡y gracias por compartirlo!
    he estado buscando en todos los comentarios para no repetir la pregunta, pero la verdad es que no he visto nada…
    ¿Cómo puedo hacer para que, cuando se hace el schroll vertical, sólo se pueda acceder al primer slide de cada sección? Si en dos secciones distintas, en las que cada una de ellas tiene varios slides, haces el schroll vertical, te lleva al último slide visitado de la sección anterior.
    Gracias otra vez !!!!!

    • Alvaro

      Buenas Ester,
      Me alegro de que guste el plugin.

      Si te refieres a cómo hacer para que una vez abandones una sección, ésta vuelva a su slide inicial, este tema fue tratado en el foro un par de veces.
      Mira esta solución:
      https://github.com/alvarotrigo/fullPage.js/issues/129

      Un saludo!

  • anthony_keo

    Hello Alvaro,

    Thank you for the awesome plugin. Is there way to declare a max-width that allows the body to be center if the browser is resized beyond that max-width? I am having trouble figuring this out.

    Also is there away I can donate to this project?
    Thank you!

    • Alvaro

      What do you exactly mean with “allows the body to be centered”. You can use `text-align:center` if you want it to be always centered.

      If you want to set a with or a max-with property to the section, you can not and you should not :), but you can do it to any wrap or element inside the section which would be the same in terms of restricting the size of the content of the section/slide. This way the text, for example, won’t expand more than the set with or max-with no matter how big the window get resized.

      Something like content

      I’ve created a demo for you here: http://jsfiddle.net/Em6LX/18/ where I applied the max-width property to the first section.

      And yeah, you have a link to donate on the github repository and I’ve just updated this post to add it at the end of the article. Thanks! :)

  • JoshHolmes

    Hello Alvaro, Great Plugin buddy! Keep it up. We are working on a project using your plugin and I’ve just got a question about the horizontal slides. Is it possible to remove the left arrow when you are at the firstslide and remove the right arrow when you are at the last slide?

    Thanks very much

    • Alvaro

      If you take a look at the documentation: https://github.com/alvarotrigo/fullPage.js#fullpagejs you will see that there’s an option for that called `loopHorizontal` which when set to false, it will also disable the arrows.

      • JoshHolmes

        Sorry about that I must have missed! Thanks for pointing it out. Knew you would have put something like that in. Cheers pal

        • Alvaro

          Your welcome!

  • ShuckinJiver

    Hi Alvaro,

    It seems that by setting autoScrolling to false it takes away the ability to scroll on mobile and the afterLoad callback doesn’t work properly. Is there anyway to avoid this?

    • Alvaro

      autoScroll:false works well on mobile phones. And the callback is fired as well. Give me your URL and I might be able to help you.

      • ShuckinJiver

        Hello, if you check out this jsfiddle you can see that the afterLoad callback is fired as you pass the section rather than after the section is done loading. So if you go from section A to section D, the afterLoad will fire upon passing section B. As for the issue with swiping on mobile, I’m referring to the horizontal swiping rather than the vertical. Thanks for your help! http://jsfiddle.net/J8hqM/21/

        • Alvaro

          Hi @shuckinjiver:disqus, I’m not sure to call that a bug. You are using `autoScrolling:false` and that’s what makes it a bit tricky. When the user is scrolling normally (without the help of any menu) the `afterLoad` event should be fired when the section is reached on the viewport, which is what it is happening right now. Otherwise, what you are suggesting is to show it when the user stops scrolling, which would cause, in some cases, tha between the 1st and the last section the user won’t be able to see anything if those sections load the content with transitions `afterLoad` or move the elements in the screen etc.

          What problem do you exactly have with mobile horizontal swiping?

  • gorisimo

    Hi Alvaro. I’m having an issue with the horizontal looping. I set it to false and it disables the first and last arrows but continues to loop. I notice it while using the keypad and on mobile. Is there a way to fix this? Here is a codepen – http://codepen.io/NewbCake/pen/rlcHJ

    • Alvaro

      That’s a bug to be fixed. It has already been reported on the github forum:
      https://github.com/alvarotrigo/fullPage.js/issues/204

      • gorisimo

        Ahh okay. I love how everything else is working. Do you have a forecast of when the bug may be fixed?

        • Alvaro

          Not really. Basically when I have time for it :)
          (And when github solves the problem they have with commiting new changes that is experimenting right now)

        • Alvaro

          The bug has been fixed in the last commit. Please download the last version (1.6.1).

  • NewbCake

    One more question. Whenever a page is refreshed it loads on the slide that it was left on, is there a way to make it always load on the first slide?

    • Alvaro

      What would that be the purpose? Anchor links (#) are used to allow sharing a URL with the current content of the site and not with the 1st section.

      It is not possible anyway. You might try something with the afterRender callback but not sure it will work.
      Take a look at this post: https://github.com/alvarotrigo/fullPage.js/issues/127

  • Thiago Passamani

    Is there any way to have the scroll automatically?

    • Alvaro

      Yeah of course. Just use the callback afterLoad, for example, and then the method `moveTo` or `moveSectionDown`:
      Take a look at this post:
      https://github.com/alvarotrigo/fullPage.js/issues/106

      And at the living example:
      http://jsfiddle.net/2dhkR/33/

      • Thiago Passamani

        Very good! Thank you!

      • mosale

        hello,
        I used the setInterval method as you indicated and it works.
        How do I restart interval to click if I change section?
        For example, I set a time in each section 13000 because there is an animation that takes time, but if I click before the 13 seconds to go in the next section the timing is not reset.
        I hope I was clear.
        thanks in advance.

  • Mark

    Hi, and first of all….your plugin is awesome (but you already know that)!
    Now the question: is there a way to add an horizontal mouse scroll navigation inside a vertical scroll navigation page? I mean, instead of the slide section, have a section with the same horizontal movement but using the mouse scrolling and when the user reaches the end of the horizontal section, scroll vertically to the next vertical section.

    • Alvaro

      I’m afraid there is no such option.

      • Mark

        Ok, no problem! It was just to ask, instead of create by myself. Thank you for the answer.

  • Jon

    Good day, Alvaro. Great plugin!

    I’m currently building my website on WordPress using your plugin. So far everything is working according to plan but I’ve hit a snag. ScrollOverflow doesn’t seem to work. I can see the slimScrollDiv in the source and I implemented the slimScroll file before fullPage.js (I renamed it functions). Yet, the scroll bar won’t show up and it won’t let me scroll down with the mouse wheel.

    Here’s the website in question: http://ftg.naturalelement.ca/#home

    • Alvaro

      Not sure what can it be yet. I would recommend you to use the last version of the plugin anyway.
      I will take a look at it tomorrow but if I were you I will start by isolating the problem. Trying to reproduce the problem without any other plugin which could interfere.

      • Jon

        Holy crap, I figured it out! I was using an older version of jquery-min.js and updated it to 1.9.1. I got a headache trying to fix it but it was so simple! Wouldn’t have done it without you suggesting to use the latest version of the plugin. THANK YOU!

  • Joao Pedro

    Hi Alvaro, great Plugin!

    I’m using the plugin to build a portfolio website. I have a few projects that I want to display in an horizontal scroll. Each project has a full width and full height image. But when I use the slides for the horizontal scroll, the images width is divided by the number of slides, and they are not acting as cover images anymore. Is there anyway that I can do this?

    And I want to have a left and right arrows to navigate through the projects. Is there any option that I can make a “next” and “prev” link for the slides?

    • Alvaro

      You can configure the styling of the arrows (and its images) by dealing with the CSS styles .controlArrow, .controlArrow.prev and .controlArrow.next.

  • Sam Esteban

    Estimado, esto me ha salvado la vida en cuanto al desplazamiento por la web, pero tengo una sola duda-problematica:

    Resulta que cuando apreto o hago scroll para ir a la seccion 2, el sitio se pega y me salta a la seccion 3 directo, sin easing ni nada, solo salta…

    Hay algun error?

    Espero ansioso tu respuesta.

    Saludos cordiales!

    • Alvaro

      Seguramente estás usando el mismo valor para una anchorlink (#) que para un “id” en algún elemento. Tal y como indica la documentación esto no se puede hacer.

      • Sam Esteban

        Estuve revisando el codigo y está todo en orden.

        Puedes revisarlo acá: http://www.cervezadelacruz.cl/test/

        Qué puede ser?

      • Sam Esteban

        YA LO RESOLVÍ!!!!

        Me faltaba colocar los data-anchor en los DIVS…

        Gracias por tu trabajo!

        • Alvaro

          No tienes que colocar ningun data-anchor en los divs, solamente en el menu…

          Tu codigo no esta en orden. Si lo revisas con el test de W3C lo veras claramente. No obstante puedes ver a simple vista como se te ha olvidado cerrar el para el y eso es lo que causaba que tu pagina no funcionase.

  • Jm Vergara Senosa

    Good day Alvaro,

    Im building a website that uses pull page plugin, the plug in is great but there is one problem im facing, right now, when scrolling using a scroll with the mouse, it moves from the first section to the last section or any section depending on how hard i scroll. i dont know what causes the problem. i hope you could help me with this one. thanks! btw im using bootstrap along with fullpage.js

    if you want to view the website, you can direct to http://xulera.projectdemosite.com/builder

    Thanks and more power!!

    • Alvaro

      Hola. No he podido reproducir to problema en la ultima version de Chrome con la ruleta del raton. Supongo que tu haces referencia a un portatil y su trackpad. No obstante veo que el valor de la variable `scrollDelay` esta dentro de lo que es normal y no deberias de tener problemas.

      Tu problema esta en que estas ejecutando la inicializacion del scrip dos veces. Mueve cualquier script fuera del body y anadelo en la cabecera de la pagina entre y .
      Es como debe estar.

      • Jm Vergara Senosa

        Thank you very much Sir Alvaro, i followed your directions and it worked! thank you very much, Though its weird why i should put the script in the head tag, any way, your plugin is one of the best plugin i ever used.

        • Alvaro

          Thanks, I’m glad you got it working.

  • Stuart Dessler

    Thank you :)

    • Alvaro

      You’re welcome !

  • Ferdinando

    Hi Alvaro, Thank you for your AMAZING work.

    I’m currently building my website on WordPress using your plugin, it’s great! Awesome!

    But now, i’ve a problem. I’m trying to hide a #section on IPAD but if i set display:none; to this section the scroll wont work properly! have you got any solutions for this?

    anyway, thank you Alvaro!!

    • Alvaro

      If it is not the first section, then use jquery or javascript to remove it on the afterRender callback. Something like $(‘#sectionSelector’).remove();
      If it is the first one then you would also need to deal with the `active` class.

      • Ferdinando

        tnx alvaro!

  • C-Wrons

    Is there a way to use images for the background instead of just flat colors? planning on using small texture imgs that will repeat. Thank you ahead of time

    • Alvaro

      See the online example and click on the “Examples” element of the bottom menu. There you can see one example with backgrounds.

      • C-Wrons

        Thank you, Didn’t see the option there. Great Plug-in

  • Adalbertus

    Hi, I wanted to use FullPage for making a slider site and skrollr for moving object with scroll, but it doesn’t work as I wanted. Please help if it’s possible.

    Here is more information about my problem: http://stackoverflow.com/questions/21953228/full-page-and-skrollr-incompatibility-slider-site-with-the-fixed-objects-attac

  • David Houde

    Alvaro, do you know if possible to speed up scroll speed? No the animation speed, but the repeat speed on the mousewheel/keyboard. Id like to be able to scroll multiple pages a little faster/smoother.Thanks!

    • Alvaro

      You can do it by changing the variable `scrollDelay` of the plugin to a lower value but as it is mentioned in the comments, you might have troubles with laptops with trackpad or with Apple devices such as Magic mouse or any Apple laptop.

  • Shutterfashion

    Hi Alvaro! I was wondering of it would be possible to make the main slides go horizontal? Im using Fullpage on wordpress, and havent been able to create a loop for horizontal pages, and since i need that, i was thinking it maybe is possible to make the mainslides go horizontal instead? Love the plugin!

    • Alvaro

      Why don’t you just create one single section with multiple slides? That would look like you want, wouldn’t it?

      • Shutterfashion

        No, i would still have vertical slides.. The site im working on would need the horizontal slides at a priority, and vertical would be a bonus. Until i have figured out a wordpressloop that gives me both, a possible change of the slidedirection would be good. Maybe its not possible without too much customization?

        • Alvaro

          It is not possible with the plugin itself but It has been done with fullpage.js before so you could take a look at the source code.
          It has been treated on the forum: https://github.com/alvarotrigo/fullPage.js/issues/200

          • Shutterfashion

            Hmm i took a look, and that would be a good solution, for now. But woul it work for me, since i dont have the functionality of horizontal slides to begin with? But if it simply inverts the slides, then it should work?

          • Alvaro

            Take a look at that site/s. I can not tell you anything else. I haven’t tried it by myself and the plugin doesn’t offer that option.
            Good luck!

  • Kevan

    Hey Alvaro I have a question. Is it possible to create a responsive menu/navigation that also makes use of Jquery? I have been trying to create on for mobile user without success so far.

    • Alvaro

      Of course you can. But you might need to add the jquery code inside the `afterRender` callback.

      • Kevan

        Tnx Alvaro that did the trick

  • Frank

    Hello,I am using the fullPage.js for my web, and I have a problem about scrolling. I have a page that it’s height is bigger than the brower height in some low dpi computer, I have set the ‘scrollOverFlow’ to true, but when I scrolled to that page, the mouse wheel can’t scroll the page and only if I click the page, then it work. However, it can’t scroll to the next page, but the pre page. I hope you can offer some help about it. Thanks.

    • Alvaro

      Probably you need to download the last version of slimscroll 1.3:
      https://github.com/alvarotrigo/fullPage.js/tree/master/vendors

      • Frank

        It seems still can’t work. When I resized the brower, it can scroll to the next page. I want to know that whether can I divide a page into two part with different backgrounds or not.

        • Alvaro

          Then you might be doing something wrong. Give me your URL so I can help you. Review your HTML markup and use a validation tool in case there’s any mistake.

          • Frank

            Thanks, https://github.com/franklam0823/fullPageJsProblem.The problem page is the second page.

          • Alvaro

            It works perfectly for me. No problems at all. Make sure you are not caching the slimscroll file. Clear your cache or use contrl+F5 to force the refresh.

            Here you have a live example I created to illustrate it. I changed the font-size to force the scrollOverflow: http://jsfiddle.net/LArhk/

          • Frank

            Yep the example work perfectly. Let me check my brower or something more carefully. Thanks so much.

            A more question. :). I want to I want to know that whether can I divide a page into two part with different backgrounds or not. For the example you show me,I want to divide the blue background page into two part, but still in one page.

          • Alvaro

            The plugin doesn’t offer such option. You would need to do it by yourself applying your knowledge.

          • Frank

            OK, thank you. :)

  • Sam Esteban

    Hola Alvaro, una consulta.
    Es posible usar el script en modo Responsive? Qué debo hacer? Ya que cuando paso la pagina al celular, el ancho queda trabado en 900px y no reduce más generando que todo se desordene.
    Gracias!

    • Alvaro

      Tienes que seguir las tecnicas habituales para el responsive design. CSS3, tal vez jQuery…etc.

      No es un tema relacionado con el plugin. Es un tema de diseno con el que tiene que lidiar el desarrollador/disenador.

      • SamEsteban

        Enterado, entonces voy bien en lo que estoy haciendo. Pensé que había una manera dentro del plugin.

        Gracias!!

  • peter

    Hello Alvaro, thanks for that great plugin!
    in want to have 2 arrows (up and down) on top and bottom of my website. if you click the arrow up button it should move up one section and so on. but i don’t know how to do it. how about the moveSectionUp() and moveSectionDown() functions? is it possible to do it with this functions? like $(‘#mybuttonup’).moveSectionDown(); –> is there missing something like on click – sorry my js knowlegde is very bad – THANKS

    • Alvaro

      You have to do it with the functions you have mentioned. You need to assign them to the click event. Please to ask general questions about jQuery knowledge reefer to other places such as http://stackoverflow.com/.

  • Daniel

    Thanks, you just made my life a heck of a lot easier ;)

  • lucie

    hi Alvaro, thanks for this amazing plugin, i’ve been looking for this kind of navigation system for a long time!
    I just have one question : i would like to add one arrow on top of the page that would scroll one section up, and one on the bottom of the page that would scroll one section down. I know I have to use moveSectionUp but I have no idea how to add two controlArrows and do it (I don’t know anything about JS…). I’d be glad if you could help me with this! Thanks a lot

    • Alvaro

      I would recommend to ask questions about jQuery, html or CSS in http://stackoverflow.com/.
      The plugin doesn’t have any option to add vertical arrows. You will have to create them by yourself and then link them with the `moveSectionUp` or `moveSectionDown` methods.

      Like $(‘#element’).click(function(){ $.fn.fullpage.moveSectionDown(); });

      • lucie

        okay I’m going to look at this! Thanks a lot for the reply! :)

      • lucie

        I just tried it and it worked, thank you so much!

        • Alvaro

          You’re welcome!

  • Sanjeet

    Thanks for this JS
    But one thing – Why, from original image, when applied on the background is getting cropped from bottom?

    • Alvaro

      You should add the correct CSS styling. This is beyond this plugin you should ask in places such as http://stackoverflow.com/ to ask or learn about CSS.

  • paul

    really nice – I was trying the callback version and had trouble designating the first slide as default on page reload – it’s a nice feature to remember the user’s last position but, I’d like to reinitialize and show the top animation again

    • Alvaro

      You could do it by avoiding using anchor links. Anchors are designed for that, to share URLs or load the same one on reload. If you don’t want that, just don’t use them.

      • Paul Smith

        I’d like to keep the nav buttons as links, I just want to re-initialize the page at the first slide.

        • Alvaro

          As I said, anchor links are created to remember the status of the site. You can’t use them if you want to load the 1st section on refresh. Just use the method `moveTo` instead of links in your menu.
          It doesn’t make sense to have anchors if you are not going to use them for anything.

  • Alireza

    hi
    how can i have my own arrow keys for navigating between slides , i mean how can i remove those 2 arrow keys from the screen . i know how to move between slides and section .

    • http://philipp.sh P.sh

      In order to remove those 2 arrow keys you need to turn off the lines 205-214 in fullPage.js.

      I guess that you can also manage their appearance there.

      • Alvaro

        Nop. That would cause problems in touch devices as well as with the keyboard navigation.

        You will need to overwrite the CSS style by removing the border BUT keeping the property border-style:solid.

        This is an issue being treated here: https://github.com/alvarotrigo/fullPage.js/pull/288

        • Alireza

          Tanx So much Alvaro for being in touch :)

  • http://philipp.sh P.sh

    Hello, Alvaro!
    Thx for that amazing plugin! You did a great job!
    I also have one question:

    I do not want my slides in #section to be shown, when they are just “passing”.
    For example: If i go from #slide1 to #slide4, I do not want to see slides #slide2 and #slide3, while animation.
    Thx.

    • Alvaro

      If you are using the option `css3:true` then you have to overwrite the style `.easing` and change the speed to 0. If you are using `css3:false` (default) you could turn the speed of the animation to 0 by using the method `$.fn.fullpage.setScrollingSpeed(0)` in some callback such as `afterLoad`.

  • Gurdit Singh Lugani

    I’ve used the version no. 1.4.5 on my site. How do I update to the new version? Will I have to download and customize everything again?

    Btw nice plugin!

    • raint

      I think as long as you didn’t make any change with the core files (js and css) it is safe for you to overwrite the old core files with the new ones

      • Gurdit Singh Lugani

        Ok Thanks!

    • Alvaro

      You just need to download the last version and include it like you are doing now. You won’t need to change anything else. Just the inclusion o the files `jquery.fullpage.js` and `jquery.fullpage.css`.

      • Gurdit Singh Lugani

        Thanks!

  • raint

    Hi alvaro, it’s me again :)
    This time I have a question about ‘Slides’ function. Any idea why when we clicked on the next slides arrow button or slide navigation in the bottom, the page sometimes jumps to previous section or next section. Please see this screencast http://goo.gl/Q7XcgN

    Any idea?

    • raint

      it looks like the problem exist when using chrome browser only

    • Alvaro

      Hi @disqus_vzi3lwAG6y:disqus, I have no idea. I couldn’t be able to reproduce it on Windows. Could you let me know in which browsers and in which version of Mac OS is that taking place? Does it happen only on click or also when you use the arrow keys?

      • raint

        Hi Alvaro, I use MacOS latest version (Maverick). It’s happened when i clicked on the arrow, but as I mentioned before It’s just happened sometimes. When I test it again when replying this message, it works just fine. strange lol.
        I’ll keep watching on it and let you know later when I find something that probably could help you to debug :)
        Thanks!

        • Alvaro

          Thanks @disqus_vzi3lwAG6y:disqus!

  • Alireza

    hi
    i have another question Guys
    for example
    i have 7 sections
    and my first section has 3 Slides
    i want my second slide will be shown as the first slide on the first Section

    because i want that user form the very first time can go left or right in the first section that will be shown to them which is
    “this has to be shown from the begining “.

    here is the problem that by using “Active” class , my second slide should be the first shown slide, but
    at the end the the ” Slide 1″ will be shown to everyone not the

    “this has to be shown from the begining ”

    which its code is

    Slide 1
    this has to be shown from the begining
    Slide 3
    2
    3
    4

    5

    6

    7

  • Tejas Amrute

    hii

    i have 5 vertical scrolling. On 3rd scroll have 10 horizontal scrolls….

    on all vertical scrolls are named in anchors…and horizonal in events(data-index=””)

    I am not able to link more than 4 horizontal slides…..

    I can link 4 vertical scrolls…but not the 5th one….code seems to be perfect

    Have you kept any restrictions on the number to horizontal or vertica or overall lslides???

    • Alvaro

      I answered you on your mail. You have to use `data-anchor` instead of `data-index` to create the link with the URL hashes. Please read the documentation about how to do it.

      If you dont want to use custom anchors then you could just link the sections with the URL above such as http://alvarotrigo.com/fullPage/#secondPage/2

  • Alireza

    If you want to define a different starting point rather than the first
    section or the first slide of a section, just add the class active to the section and slide you want to load first.

    i have copied the above text From
    https://github.com/alvarotrigo/fullPage.js/blob/master/README.md

    this is not working
    i want my first section and the second Slide in it work as the STARTING POINT.
    this is My Code

    Slide 1
    Slide 2
    Slide 3
    Slide 4

    section 2
    section 3
    section 4

    • Alvaro

      Make sure you are using the last version of fullpage.js 1.8.0.
      If you are, you are doing something wrong then. Check the javascript console for errors. I can not help you more without a link to your site or more code .

      If you want to add more code, please use the github forum for it. This is not place to post code. https://github.com/alvarotrigo/fullPage.js/issues?page=1&state=open

  • Tiago Fernando Centa

    Hi, Alvaro! As you can see in the bellow exemple, when click in a link to a slide, and back to the home and try to click the same link again, the hash changes but don’t move. How can I solve this?

    http://teste.upplay.com.br/laura_clinical_center/

    • Alvaro

      I don’t understand what you mean. A non-menu link? Your site seems to work well for me…

  • Tiago Fernando Centa

    sorry, the version I was using is old, the recent version is working fine. Thanks!

    • Alvaro

      Yeah ok, i see. No problem.

  • http://twitter.com/mklappstuhl mklappstuhl

    Hey Alvaro,

    I’m thinking about using your plugin to build an onboarding flow/wizard.

    The user supplies some information and content on the following slides is dynamically updated to reflect that information. Also the user should not be able to scroll using his mouse or keyboard so steps can’t be accidentally skipped.

    Is it possible to configure fullPage.js like that? and can I modify the content of a section after initializing the plugin? Do you think there are better ways to achieve this?

    Cheers & thanks for making OSS!

    • Alvaro

      You can not add slides dynamically. You will need to have them since the start. What you can do is add content dynamically to them. (by usingn ajax)

  • My name

    Hola Alvaro, supongo que hablas español ^^

    Queria saber si has pensado en hacer este plugin sin utilizar a jQuery ?

    • Alvaro

      Efectivamente hablo espanol. Y la verdad es que no lo tengo en mente. jQuery es bastante comun a dia de hoy y tampoco es tan pesado para las conexiones actuales y menos aun si carga de cache.
      Lidiar con javascript complica bastante las cosas para hacerlo compatible a diferentes navegadores y sus diferentes versiones. Ademas, el tema de las animaciones en javascript se complica bastante.

  • Gurdit Singh Lugani

    How to disable autoscrolling and slimscroll for mobile?

  • Jordon Herdman

    I want to do this but I can’t make my website one page because I have full screen video on every page. How can I modify this so it will work with separate pages?

    • Alvaro

      I don’t understand what you what to achieve. But if you download the plugin you will see an example of a full page video section in the examples folder.

  • Xroad

    Hi,
    Great plugin, I would like to know if it’s possible to use it without the fullscreen mode ? I don’t have fullscreen pages but I would like that my page scroll between my different .

    Like this site : http://offres.numericable.fr/tripleplay/labox-13169

    Thank you in advance

  • Blarg

    Hi,
    yeah, first of all, awesome plugin.. looks really nice :)
    But is it somehow possible to scroll horizontally instead of vertically?
    I’m not talking about the scrolling inside a section, i mean “real” horizontal scrolling. :)

    Thanks in advance!
    -Blarg

    • Alvaro

      I don’t know what’s the difference beween the `scrolling inside a section` and the ` “real” horizontal scrolling` you are talking about.

  • Almas

    Hello !
    Great plugin! But I have question : How to change navigation cirlces( created bt tag ul ) to my own navigation( something) ?

    • Alvaro

      Hi Almas, there’s no option in the plugin to do it. You would need to do it by using jQuery or modifying the plugin itself.

  • Chace

    I love this plugin! But when I add it to Dreamweaver CS6 I can’t get it to function correctly :(

    • Alvaro

      Sorry I can not help you with that, I don’t know about Dreamweaver.

  • jonas

    Two questtions:

    1)

    With horizontal scroll and resize the browser window current page scrolls away and come back after a sec. Can you always follow the browser windows without the delay.

    http://alvarotrigo.com/fullPage/#secondPage/2

    2) When you have horizontal scroll can you hide the slimscroll during scroll, now it’s looks like a bug in on the page during page change.

    /jonte

    • Alvaro

      1) Yes, it is the way it has to work.
      2) You can try to hide it by applying the hidden style with jQuery with some callback. That’s not a feature of the plugin anyway. You have to find a way by yourself.

  • Julio

    Hello few days i used this pluging but i have a litte problem i post obe div with a google maps when a used my mobile have problems with the map because both code used scrolling when try used the map scrolling all the page move down or up i need to disable the scrolling when i used the map on mi mobile

  • imtiyaz

    Hi Alvaro! Thanks for Open Sourcing such amazing plugin. I have a little problem integrating it with my application. Everything is working perfect but on window resize the current slide scroll back to first slide and then again it scroll to current slide. I did not find any fix for this with my Google search. Can you please tell me the possible solution
    .

    • Alvaro

      That’s the normal behavior of the plugin.
      The topic was already treated at the forum: https://github.com/alvarotrigo/fullPage.js/issues/64

      There I suggested a possible solution modifying the plugin in case you are using css3:false.

      Regards,

      Alvaro Trigo

  • Julio

    Hi its me again some body help about the problem with the google maps on srolling puglling i see few examples on my mobile in all examples have problems with the map div on scrolling

    • Alvaro

      Try it downloading the last verison of fullpage.js and adding the map container selector to the `normalScrollElements` option.

  • Derek

    Hello first off thanks for the blog post! I find this effect very useful, my question to you.. Is there a built in method for turning off the effect on mobile devices, or should I use the @media css approach and then turn it off from there?

    Once again great work!

    • Alvaro

      You could use the method `$.fn.fullpage.setAutoScrolling(false)` to turn of the autoscrolling.
      If you want to totally turn it off, there’s no way right now.

      I would recommend you call the initialization of the plugin under a condition depending on whether the device is a touch device or not.

      You can not use a CSS media query to turn off the javascript plugin. You would need to do it from the javascript itself.

      Take a look at this answer: http://stackoverflow.com/questions/22457529/disable-fullpage-js-on-mobile-touch-devices

      And this one in the forum: https://github.com/alvarotrigo/fullPage.js/issues/182

      • Derek

        Just another quick question, but if I set my fullpage to the regular scroll options, when I call my else (phoneDevice =true) I get an error saying the method does not exist. Could this be because I called the fullpage(); method already?

        • Alvaro

          I would recommend you to ask on the forum or on stackoverflow. This is not the place to discuss code problems.

  • raint

    Hi Alvaro, I found that version 2.x is released. Is there any major changes to the sript itself? Where can I read the changelog? Thank you for your hard work

    • Alvaro

      The major change is the addition of a wrapper for the sections and the way to initialize the plugin using that wrapper.

      You can see how the documentation has been updated for it.

      However, I decided to keep it compatible with the old structure and initialization to avoid confusions with people who was already using fullpage.js.

      This new change avoid some troubles with the placing of the javascript files before the tag as well as with fixed elements (the option fixedElements is no longer needed if you keep your fixed elements outside the sections wrapper).

      I’m sorry but there’s no a changelog about it yet.

      • raint

        Ah nice. Thanks!

  • Jm Vergara Senosa

    Hi Alvaro, Just a question, is it possible that the “slides” can slide vertically?

  • raint

    Hi alvaro, Is there any easy way to add css style to the navigation tooltips? I just realize this feature today and I’d like to add some style such as background etc. I’ve searched through the css file but no luck. Thanks

    • Alvaro

      You can customize their style by using CSS. You can take a look at other examples in the section “who is using this plugin” at the documentation:
      https://github.com/alvarotrigo/fullPage.js#who-is-using-fullpagejs

      If you have troubles with CSS I would recommend you to ask in http://stackoverflow.com/ under the CSS tag where you will get better answers.

      • raint

        Hi Alvaro, Thanks for the suggestion. I looked at the sony website but it looks like they are using the old version of your script and also, it looks like they were doing that from the javascript side not css side.

        • Alvaro

          You can take a look at the Apple demo in which some things such as the color were also overwritten: http://alvarotrigo.com/fullPage/examples/apple.html

          It is done by using CSS.

          • raint

            Umm … maybe I wasn’t cleared enough describing the problem. Can you please have a look at this screenshot? https://www.dropbox.com/s/9klop38eoz4zwzw/4tsw0.jpg
            All I wanna do is just to add a css styling for the ‘powerful’ text. It can be changing the font size, color etc, but I just can’t find any selector that referred to that part. I was trying to change the property of #fullPage-nav span but it’s for the ‘dot’ not the text.

          • Alvaro

            If you use any DOM inspector you will be able to see how it uses the class `fullPage-tooltip`. Which you can overwrite as it is being done in the Apple demo, as the default color is black and you are seeing it grey.

          • raint

            errr .. how can I missed that. It’s probably my browser as when I use chrome dev tool it shows nothing. https://www.dropbox.com/s/p9rps9lw0avccbc/q0zfg.jpg
            Thanks for the help alvaro

          • Alvaro

            The `span` you are pointing in the DOM is for the 3rd bullet not for the 1st one which is the one with the text.

          • raint

            well it is hard to pointing cursor over that text because it will be hidden automatically once cursor out of dot area. But thanks anyway for the hint :)

  • Gary Reckard

    Dunno if you’ve noticed the typo in the first paragraph of your article. “fullscren” should be “fullscreen”. Cheers!

    • Alvaro

      Thanks for reporting it! Changed!

  • Striking Concepts

    Did you consider making a wordpress theme for fullpage.js?

  • fabianhijlkema

    Maybe I’ve missed it in your documentation, but have you thought of adding the option to follow a ‘storyline’? Meaning that by setting this option to true, the user will automatically go through any slides within a section by scrolling down, and go to the next section after the last slide.

    Hopefully that makes sense.

  • stever1000

    Hi Alvaro. Great plugin! However it doesn’t get round the inertia scroll issues on Apple devices where an up or down mouse movement causes a scroll up or down two panels rather than to the next panel. Any thoughts on this?

    • Alvaro

      You are probably doing something wrong. Probably forgetting about this: “Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).” (extracted from the documentation)

  • D’Andre

    I’m having an issue with adding the nav bar that I want and a footer, could you help me?

    • Alvaro

      Difficult to help if you don’t give any details… Anyway, please read the documentation and see the source code of the available examples online: http://alvarotrigo.com/fullPage/examples/fixedHeaders.html

      • D’Andre

        The issue I’m having the nav bar is not moving the way it should, and my footer is not coming up the way it should either. Could you help me? I have a link to my site so you can see it http://expressrunn.com/apple.html. If you click on another page you will see how the nav bar should look and how the footer should look as well

        • Alvaro

          Everything is detailed in the documentation. You have a very specific problem which is not related with the plugin behavior but with your own code. I’m afraid I can not help you there.

  • Charles Lehnert

    Hello again, Alvaro! Is there any way to uninitialize the plugin after it has been initialized?

    • Alvaro

      Nop.

      • Charles Lehnert

        Are there any plans to include this functionality in the future? This could be very helpful, e.g., allowing the fullscreen scrolling only when the browser window is a certain size and turning it on or off on window resize, etc.

        • Alvaro

          Possibly. There’s an open issue in github about it.

  • marco de falco

    Hi Alvaro, is there any way to make sections and slides scroll together? I just need that user uses hi scrollwheel and when a page has slides the wheel scrolls them before to go to next page.

  • Kevin

    I can’t seem to get the onLeave event to work. I used the code straight from the documentation and it does not through the alert message. No errors…nothing. I wan’t to be able to have anything animated in through a callback to animate back out so that when they scroll to it again it animates again.

    • Alvaro

      Make sure you are using the latest version of the plugin. There has been changes on that event. Then it should work.

      • Kevin

        its version 2.0.7

      • Kevin

        I got it working. In the example the function is missing one of the parameters “nextIndex” once i put that in the code it worked fine.

  • agon

    is there a way to have this set to “autoScrolling: false” when the windows is in tablet size and “autoScrolling: true” when it is above tablet size?

    • agon

      Nevermind I figured it out.

  • chromaticMind

    Hi Alvaro,

    [I posted a similar questions below on a different thread by accident]

    I am looking for a feature where one can choose particular slides that get vertically centered while the others don’t.

    Is this possible/feasible?

    Thanks
    Ashish

    • Alvaro

      As I answered in your previous question. Yeah. You can by overwritting the css properties of the slides.

      • chromaticMind

        Thanks for the prompt reply. I am happy to make this change myself, but could you point me to the right file and location within it where the CSS deals with vertical alignment. Thanks!

        • Alvaro

          You don’t need to know it. Just add your styles after the plugin .css file.

  • Julie

    Hello Alvaro,

    Love your site! Had a quick question… When you have a horizontal scroll, is there a way to have it stop at each end and not have it auto scroll to the beginning if you try to swipe again?

    For example you have a horizontal scroll with 5 slides, 1, 2, 3 ,4 & 5- when you start at slide 3, scroll all the way to the left to slide 1, it would stop if you tried to slide to the left any further, vise versa if you scroll to the far right it would stop at the last slide and you would have to swipe back 1:1 ratio back through to the middle.

    Thanks!
    Julie

    • Alvaro

      As I told you by mail and by answering in github, just by using the option `loopHorizontal:false`. Please read the documentation for more info.

      • Julie

        Sorry, I had posted here first before locating the forum to ask the question, wasn’t sure how to delete my post on here.

        Thanks for your help!

  • Camilo

    Hello Alvaro,

    I am developing a site and all have horizontally scroll, i want callback on some pages. I´m trying but don´t work.

    Thanks for your help.

  • sumo

    Hi Alvaro,

    First I want to thank you for this nice plug-in.

    I have a quick question. I want to display browser scrollbar permanently while mousewheel also jumps to above and below sections.
    Same functionality like below website.
    http://www.beoplay.com/products/beoplaya9#magic-touch

    Thanks
    Sumo

    • Alvaro

      Hi Sumo,

      It can not be done right now with the plugin.
      If you really need it I could customize the plugin for you for some price.

      • Sumo

        Thanks for the quick reply and could you please let me know how much that will be cost for the customization?

  • Javi

    Hola Alvaro,

    quiero que mi primera sección no sea fullpage, es decir, que tenga scroll hasta el final de la primera sección, y que las demás secciones sean fullpage. He intentado utilizar el método “normalScrollElements” haciendo un div que ocupe toda la primera sección pero no funciona. ¿Habría alguna forma de conseguir esto?

    Muchas gracias.

    • Alvaro

      Tienes que incluirlo dentro de fullpage.js. Usa la opcion `scrollOverflow` y te creará una barra de scroll en la primera sección si su contenido es mayor que el de la ventana del explorador.

  • Erick

    Hola Álvaro, se utiliza un anclaje con #, pero al recargar el sitio evidentemente regresa a esa sección, crees que haya alguna manera de que al recargar siempre mande al primer slide?

    • Alvaro

      Si. Anade la clase active en la primera secion y el primer slide de la misma si es que tiene. Esta explicado en la documentacion: https://github.com/alvarotrigo/fullPage.js#required-html-structure
      #

      —-
      If you want to define a different starting point rather than the first section or the first slide of a section, just add the class active to the section and slide you want to load first.

      —-

      • Erick

        Gracias, está muy completo, en lo que leo y por la pasada que vi y los ejemplos, pasa lo mismo, a lo que me refiero es, por ejemplo : http://alvarotrigo.com/fullPage/#4thpage … Si tu entras a esa página entraras directamente a la sección 4, crees que haya forma de que al darle un “refresh” o entrar directamente a esa … borre ese “#4thpage” y vaya directamente al inicio?

        • Alvaro

          Como te he indicado anteriormente. Solamente tienes que anadir la clase active en la seccion que quieras cargar por defecto. Haz la prueba…

          • Erick

            Si, es que ya hice la prueba :( … se está basando en la url … ignora la clase active

  • Pedro

    Hay alguna forma de agregar o eliminar dinámicamente los slides (en específico los horizontales) …. ??? Gracias

    • Alvaro

      No. Puedes jugar con anadir o eleminar la clase `fp-slide` de tal forma que si no hay el plugin creera que no hay mas slides.

      • Pedro

        Muchas gracias, y hay manera de obtener el número de slide y la cantidad de slides?

        Lo que quiero es cargar contenido dinámicamente en los slides solo que a veces puedo ocupar un solo slide y a veces dos o más. (Aquí intenté agregando html con jquery pero ya no me divide los slides a pesar de que pongo la clase slide, quizá también deba agregar la clase fp-slide como dices.)
        Y el otro punto es activar y desactivar las flechas dependiendo del slide en el que me encuentro.

        Gracias

        • Alvaro

          Eso corresponde a tu manejor de jQuery y javascript. Deberías de preguntar en otros sitios como http://stackoverflow.com/

  • Pallava

    Why is the below piece of code is excluded for Tablet device?

    ———————————————
    if (!isTablet) {
    var resizeId;
    //when resizing the site, we adjust the heights of the sections
    $(window).resize(function() {
    //in order to call the functions only when the resize is finished
    //http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
    clearTimeout(resizeId);
    resizeId = setTimeout(doneResizing, 500);
    });
    }

  • JL

    I am trying to do something that I thought was simple, but it isn’t working:

    Section 1
    Section 2
    Section 3

    Slide 2
    Slide 3
    Slide 4

  • Gabriel Amorim

    Really elegant and useful. I’m having a weird issue though. My scroll seems to jump a section every time I use a slide. Have a look at this one: http://bit.ly/Vgf3ad

    I thought there was a issue with the anchors but I have figure it out as yet. Any hints?

    • Alvaro

      That’s because you are committing a mistake: “Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).”
      It is detailed at the documentation.

  • Boinx

    Hi Alvaro! Great plugin you got here. Got a question though about IE Compatibility. It seems that normalScrollElements is not working on IE? Do you have any clue why? Thanks!

  • Attila

    Hi Alvaro!
    I am searching for a page scrolling like this under wordpress.
    But i can’t find a wordpress plugin like this. :-(
    Can you help me how can i do this scrolling method under wordpress?
    Or can you suggest me a WP plugin like this.
    Or any idea? (but i am not a programer) :-)
    Many thanks

    • Alvaro

      This is a jQuery plugin. Not a wordpress one. You would need to do it by yourself.

  • https://plus.google.com/106933750955006872868/posts Evan Borden

    You should add an option to insert a custom height, and a callback to update on resize.

  • Justin Young

    Awesome plugin! Thanks a lot!

    • Alvaro

      You’re welcome !

  • Diego M.

    Que tal Alvaro como va todo? gracias por compartir este excelente plug-in, me ha funcionado perfectamente, pero tengo un pequeño problema que me esta matando.

    Quiero hacer un slide para mostrar unas imagenes, pero no puedo acomodar un titulo en la seccion, cuando pongo el titulo en una div separada de las de “slide” la seccion entera se corre para arriba, (al titulo le tengo una margen superior en todas las secciones por que tengo un menu fijo), y cuando le quito la clase “slide” queda bien, pero obviamente no me sirve.

    Espero me pueda ayudar hombre. Muchas gracias.

    • Alvaro

      Eso es cuestion de CSS. Nada que ver con el plugin en si.
      Se trata de usar la posicion absoluta y relativa correctamente.

      Te recomiendo preguntar dudas de CSS en http://stackoverflow.com/ donde te ayudaran mejor.

      Un saludo

  • pepito

    No funciona con jquery-1.11.1
    Don’t work with jquery-1.11.1

    solo funciona con jquery 1.8.3

    muy mal ;(

    • pepito

      disculpen, ya vi que fue error mio, funciona bien jejeje $:

      disculpa y gracias mi rey

  • IG Design

    Thanks a lot for this plugin and thanks for sharing!!! :)

    http://ivang-design.com/ophion/ophion-coming-soon/#firstPage

    • Alvaro

      You’re welcome! Donate i you feel like ! :)

      • IG Design

        Done! $50 for beer! Enjoy, you deserve it. :)

        • IG Design

          One question. Is there a way to combine this plugin and multiScroll on same page?

          • Alvaro

            Nop. I’m afraid they work in a different way.

          • IG Design

            Thanks!

        • Alvaro

          Thanks a lot man!! I appreciate it ! :)

  • Neko

    Hola Alvaro. Pls gimme a little tip with scroliOverFlow. I need to move top border where the text dissapearing lower. Just can`t figure ou how.

  • Guillermo Gómez

    Hola Alvaro, como estás, impresionante trabajo!!! Te felicito!!
    Una consulta, es posible combinar el fullpage con el multiscroll?
    De ser posible que debo hacer para lograrlo?
    Desde ya muchisimas gracias y felicitaciones de nuevo!!!

    • Alvaro

      Buenas, gracias! Me alegro de que te sea útil!
      Y nop, no se pueden combinar.

      Un saludo!

      • Guillermo Gómez

        Gracias Alvaro, una última pregunta: es posible pasar manualmente la velocidad para cada sección en particular?

        • Alvaro

          No tendria mucho sentido. Que pasa si vas de la section 1 a la 4? Que velocidad usas? Y si vas de la 2 a la 1?

          Puedes jugar con las velocidades usando la function `setScrollingSpeed` que ofrece el plugin junto a callbacks como `afterLoad` o `onLeave`, pero el plugin no ofrece nada predefinido para realizar eso.

          • Guillermo Gómez

            ok muchas gracias, veamos que sale :) Saludos desde Argentina!

  • Simon

    Hi Alvaro, sent you an email but sending this too, having an issue getting multiple slider sections to work with images in, seems to cause me problems with at least one slider section ending up not working. Any ideas?

    • Alvaro

      I’ve replied you. It looks like a problem in your html markup, not in fullpage.js code. Good luck!

  • Jan

    Hello Alvaro,
    Your video background example at http://alvarotrigo.com/fullPage/examples/videoBackground.html
    doesn’t seem to work in Safari (version 8.0) on a new iPad air. All I see is a black screen with a video “play” button in the middle, but that button doesn’t do anything when I click it. Is it my iPad, or some new behavior with iPad Airs?

    • Alvaro

      That’s how it is suppose to work in the iPad. The problem is not with fullpage.js but with the way the ipad plays the video. If you manage to play a video in the ipad in the way you want, then you will be able to do it by using fullpage.js as well.
      Again, nothing to do with fullpage.js itself.

  • mozainuddin

    This is awesome, Thank you.

    I have a little issue, I have a map on a div. I set the whole section to Normal scrolling, However If I get to the section from dirct like the Normal scrolling didn’t work no more.

    Is there a fix for it?

    • Alvaro

      Don’t use `normalScrolling` for the whole section or otherwise the autoScrolling won’t work to go to any other section. Set is just to the container of the map.
      If you have it full screen, then you will probably need a button to go down, as scrolling will just zoom in and out in the map.

      • mozainuddin

        Hello Alvaro, thank you for replay.

        I did make it to the container “div” in my case of the map, it work pretty much as expected.

        However If I get to the map section from a direct link for example:” http://www.example.com/index.html#map” < it is something I need to do.
        the scrolling on the map become like a full page scrolling within the map. I mean it didn't zoom in and out on a point but it zoom in & out like scrolling zoom if that make sense.

        because I'm not able to send that link in here for some reasons. I will do a short video about it to explain it better. and I'm hoping really you can help.

        Thank you again for the awesome work,

      • mozainuddin
  • daniel willcox

    fantastic plugin, thanks.
    I have a question: Is there a reason whyi might he having trouble seeing section0 bg images in the css?
    Thanks
    Dan

    • Alvaro

      No idea what you mean.

      • daniel willcox

        Sorry, that was a really rubbish question. My bad.
        I am having problems adding background images. I know it should be straight forward but I can’t figure out why? I think I have followed your instructions and also researched elsewhere but i am out of ideas?
        Here is some code: https://dl.dropboxusercontent.com/u/31012350/Site.zip
        I’d really appreciate your help.

        Thanks
        Dan

  • TheZenOfZen

    This is a really well written plugin. Well done!

    • Alvaro

      Thanks! Any suggestion will be more than welcome!

  • Bruno Nascimento

    The better JS I`ve ever use, but i`m in problems with it.
    Now I`m creating a newsletter for my job, and I’m using the menu fixed, however it does not begin at the top. The menu begging about 200 pixels from the top of the page.
    I tried everything to operate newsletter, but I don’t could.

    Do you can help me?

  • Gie

    Is there a way to add scroll to top link? with nice animation using fullpage.js ? Thank you.

  • pacosegovia

    Hola Álvaro. Enhorabuena por el plugin, va de maravilla. Una pregunta, ¿cómo puedo evitar que, estando “a mitad” de una sección”, haga scroll hasta el principio de esa misma sección? Le he dado mil vueltas al javascript y no encuentro la función. Muchas gracias.

    • Alvaro

      No se muy bien a que te refieres. Estas usando autoScroll:false ? O scrollOverflow:true? De otro modo no se puede estar en la mitad de una seccion porque las secciones son a pantalla completa…

      • pacosegovia

        Estoy usando autoScrolling:false y scrollOverflow:false porque me interesaba poder hacer scroll “normal” por la web, pero cuando me quedo a mitad de una sección, hace scroll automáticamente hasta el principio de dicha sección. ¿qué estoy haciendo mal?

        • Alvaro

          No se cual es tu problema. El plugín no hace scroll automatico hasta que no pinches en algún link con achor o menu. Puedes ver la demo aquí: http://alvarotrigo.com/fullPage/examples/normalScroll.html

          • pacosegovia

            Exacto, lo tengo configurado con ‘autoScrolling’ y ‘scrollOverflow’ false. Aún así, es como si se quedara “enganchado” al anchor y hace scroll al inicio de esa sección. ¿Puede que sea porque he modificado la altura de la sección? Le he dado un 90% para que muestre un 10% de la siguiente sección.

          • Alvaro

            Puede ser. No me hago responsable de ningun cambio sobre el funcionamiento por defecto del plugin. Un saludo.

          • pacosegovia

            Claro, simplemente preguntaba por si me había saltado alguna opción. Como decía, enhorabuena por el plugin, es un gran trabajo. Un saludo.

  • Michele

    Hi, it’s possible to change slides by dragging mouse arrow?

    • Alvaro

      Nop.

      • Michele

        Ans using mousewheel?

        • Alvaro

          Nop. If you want so, I could customize the plugin for you for some price.

  • alfade

    Hi Avaro, thanks for making this great script. Anyway, is it possible to have a fade in fade out slide effect for horizontal slide instead of slide to left/right?

    • Alvaro

      Nop. This is an slider plugin.

      • alfade

        I see. No problem at all. Thanks for the reply anyway :)

  • prem

    hi, wonderful plugin. i have a small problem. when i try to add any javascript before the tag the output is completely wrong . each section size changes and becomes small and does not fit the entire width of the viewport. can you please help me ??

  • Morten Hjerl-Hansen

    Hi Alvaro, is it possible to put html form elements on top of images in fullpage. As you see, I have encountered an issue doing that: http://www.derbuttle.com/test/easing.html

    • Alvaro

      Of course you can. But that’s belong the plugin’s scope. That’s all about your HTML and CSS knowledge rather than about fullPage.js. I would recommend you to ask in other places such as stackoverflow.com

      • Morten Hjerl-Hansen

        Ok. Thank you.

  • Joao Pedro

    Hello Alvaro, using fullpage’s scrollOverflow: true option, is it possible to call menu anchors for different pages and automatically display the top of the section instead of the position where you left it after scrollig? Pls give me a clue. Many thanks.

    • Alvaro

      Many things are possible with the right knowledge. Fullpage.js doesn’t provide any option for it, but you can achieve it by using jQuery or javascript. If you want me to help you write me mail: http://alvarotrigo.com/#contact-page

  • David Sobusik

    Thank you so much. Soon when i finished the website, i’ll let you know + donate for your fantastic help

    • Alvaro

      You’re welcome! ;)

  • Tofanelli

    Hello Alvaro…

    As you recommended, I’m trying to use this one rather PagePilling… and, i noticed an issue ( I guess) on “responsive” demo (from the zip file)

    1- when you scale the browser windows to smallest size allowed (chrome), the “autoscrolling” stops to work, and the sidebars become active again (it was supposed to works like this?), even if you scale manually or if your use the Web Developer plugin (chrome and firefox as well)…

    2- to be more responsive, have you considered to use REM and VW and VH? I read this nice article today and might be useful for you – http://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about–cms-22573

    Thanks very much for your awesome plugins =)

    • Alvaro

      1 – That’s what the responsive option is about, you can read more in the documentation: https://github.com/alvarotrigo/fullPage.js

      2- That’s belong the plugin’s scope. That’s something the designer should deal about, not the plugin itself.

      • Tofanelli

        ah… ok then…. =)… i just thought it was good to improve your plugin… but ok then =)

        Cheers =)

  • Andrey

    Hi Alvaro.
    Thank you for a wonderful script, it is awesome.
    I used it in my latest project http://legal-systems.com.ua/
    Everything works fine, except for one detail:
    1. the user scrolls down some section, in my case #about
    2. switch to other section, #mission
    3. decides to return to the section #about and clicks on a link in the top menu
    4. go to the section #about and sees a bottom part of the section.
    How to make so he was shown the top part of the section?
    In other words, how to reset the scroll to the starting position?
    Thank you!

    • Alvaro

      The plugin doesn’t offer any option for it, it acts as any other normal frame would do. If you want to solve it, send me a mail through the contact page.

  • Steve Gordon

    Hey Alvaro,

    I really appreciate the time you’ve put into this amazing script! I’m still kinda new to web development. I was wondering if there was a way to add a video background to the oneSection.html example? I have the video in there and working I just can’t scroll to the rest of the site. I’ve attached an image of the javascript in the head section of the site if that helps.

    Thanks!

    • Steve Gordon

      I can get the scrolling to work if i take out the “afterRender: function()…” but I can’t get the video to play but If I leave it in, the video plays but the page won’t scroll.

      • Alvaro

        You are forgetting a comma after `css3: true,` if you check the javascript console you will see an error message pointing it out.

        • Steve Gordon

          Thank you soooo much, I’ll be buying you some coffee soon : )

  • http://www.adrianomachado.com Adriano Machado

    GREAT script Alvaro. Thanks for share it. I have a simple question (I think). I’m working in a code based in your Methods example. Is it possible to disable the left and right arrows when you have more than one item into a section?

    Actually I would like to move left or right just using ‘a href’. That’s why I’d like to disable the arrows.

    • Alvaro

      You can hide them with CSS, just overwrite the style `fp-controlArrow` and use `display:none`.

      • http://www.adrianomachado.com Adriano Machado

        Thanks a lot Alvaro.

  • gernot

    Hi Alvaro,

    thank you for this gorgeous js! i would like to invert the scrolling. like here described (https://github.com/alvarotrigo/fullPage.js/issues/200). to change the vertical to horizontal scrolling and vice versa is in the js AND css part? where in the js – in translate3d? i would appreciate any hints from you!
    thank you and take care!
    best regards
    gernot

  • http://www.adrianomachado.com Adriano Machado

    Hi Alvaro. I hope you can help me one more time. I’m using “owl.carousel” (jQuery too) to make a responsive full banner system into the first section of my fullPage.

    It works fine when you load the page, but if you resize the browser, the images (banner’s) become oversized instead of resized. I tried to use “noConflict” and “afterRender” but any of them worked.

    If the resize code works, the fullPage code doesn’t. I think the conflict is related to this CSS code (jquery.fullPage.css):

    .fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    width: 100%;
    }

    If I delete it, the resize works fine, but the fullPage stop working.

    Any idea how could I fix it?