fullpage.js

I have multiple HTML videos on my page, and want to apply this custom video player to them. The thing is, this only works for the first video, and not for the second, third and fourth. I have no idea where to start. I made a fiddle of the current state: JSFiddle My Javascript /* Get Our Elements */ const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('.progress'); const progressBar = player.querySelector('.progress__filled'); const toggle = player.querySelector('.toggle'); const skipButtons = player

Im using Fullpage.js and trying to make it work with wordpress, and its going forward. However, I'm trying to figure out how to be able to scroll trough a slide with content higher then the active slide. The plugin comes with a scroll overflow function, but that vill make a scrollbar that scrolls trough your content, and keeps going to the next slide. Ideally a constant scrollbar that stops at the current slide would be the best option for me, but i dont know if this is possible. Been fiddling with this for a while, so if anyone has any ideas how to solve this i would be thankful. My site:

Okay, the title might be a bit hard to understand, I'll try and explain. So I'm using fullpage.js I have in total 9 sections: Home About(about has 6 "undersections" that is a continuation of the first about section) Contact In the menu there are only 3 navigation options Home, about, contact. I've made the menu so that the active class is added when on corresponding section - as simply done with ready made options. When I scroll and leave the first about section the active class is remove and the menu item is not highlighted. So here's the thing I want the active class to remain on all the

I can't quite get my head around this option and how it works, the document provides an explanation but what is an example of this in practice? From docs: normalScrollElementTouchThreshold : (default 5) Defines the threshold for the number of hops up the html node tree Fullpage will test to see if normalScrollElements is a match to allow scrolling functionality on divs on a touch device. (For example: normalScrollElementTouchThreshold: 3 ) The option normalScrollElements works quite easily on desktop browsers as the mouseover element gets propagated down through the DOM structure. For touch

I never worked with fullpage.js. I tried a lot with the slider transition effect. scrolling is fine with slider effect. its move to left to right with scrolling but can't add the fadeIn and fadeOut effect. Sample site : http://www.mi.com/shouhuan/#clock My Code : http://jewel-mahmud.com/demo-site/index.html var slideIndex = 1, sliding = false; $(document).ready(function() { $('#fullpage').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], scrollingSpeed:1000, css3: true, onLeave: function(index, nextIndex, direction) { if(index == 2 && !sliding) { if

I am using fullpageJS https://github.com/alvarotrigo/fullPage.js/ to make my website. However when trying to change the arrow style: .controlArrow.prev { left: 50px; background: url(left.png); background-repeat: no-repeat; } .controlArrow.next { right: 50px; } It doesn't work, can anyone explain why? Extending @Alvaro's answer, all you need to replace the default border-made arrows by images is as follow: .fp-controlArrow.fp-prev { left: 0; border: none; width: 50px; height: 101px; background: url(left.png) no-repeat; cursor: pointer; } .fp-controlArrow.fp-next { right: 0; border: none; width:

I am building an Angular app that uses fullpage.js in a few of its pages. Currently, I am initializing fullpage (e.g. $('#this-routes-fullpage').fullpage({ options... }) ) using a custom directive within the template for each route where it is getting used. At the end of each of these custom directives, I'm calling scope.$on('$routeChangeStart', function() { $.fn.fullpage.destroy('all'); } This works as I expect (the plugin is destroyed and reinitialized the next time it is encountered) when I am navigating from one page that utilizes the plugin, to another page that doesn't utilize it, and

my HTML5 video autoplay is not working. <video preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" id="myVideo"> I also tried without the ="true" value, and it doesn't work either. I've already used the same code in other sites and it worked just fine. I'm using a framework based on fullPage.js, but i looked for something related on the files and didn't find anything. The site is at http://agenciamilk.com/site/2/ if you wanna take a look. Thanks You should use the afterRender callback the fullpage.js plugin offers. afterRender() This callback is fired just after the structure