I have a school project due date coming up and I am having an issue. My fullpage.js horizontal slider has stopped working after I set ScrollBar to true.
If I set it back to false it works but I would like the scroll bar to be there. The example with the scroll bar on the website works perfectly.
http://alvarotrigo.com/fullPage/examples/normalScroll.html
I cannot for the life of me figure out why mine no longer works. I have a feeling I am missing a command but I am still a beginner to jQuery.
Please help if you can :)
It is much appreciated.
my site address is: http://cultureboard.noahalexfarr.com/#firstPage
Below is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Items of my Life</title>
<meta charset="utf-8">
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="js/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script src="http://use.edgefonts.net/arizonia:n4:all.js"></script>
<script>
function parallax(){
var prlx_lyr_1 = document.getElementById('prlx_lyr_1');
var prlx_lyr_2 = document.getElementById('prlx_lyr_2');
var prlx_lyr_3 = document.getElementById('prlx_lyr_3');
var prlx_lyr_4 = document.getElementById('prlx_lyr_4');
var prlx_lyr_5 = document.getElementById('prlx_lyr_5');
var prlx_lyr_6 = document.getElementById('prlx_lyr_6');
prlx_lyr_1.style.top = (window.pageYOffset / 3)+'px';
prlx_lyr_2.style.top = -(window.pageYOffset / 4)+'px';
prlx_lyr_3.style.top = (window.pageYOffset / 6)+'px';
prlx_lyr_4.style.top = -(window.pageYOffset / 8)+'px';
prlx_lyr_5.style.top = -(window.pageYOffset / 12)+'px';
prlx_lyr_6.style.top = (window.pageYOffset / 3)+'px';
}
window.addEventListener("scroll", parallax, false);
</script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1B2126', '#394D59', '#3E768C', '#41A8BF', '#9BEAF2'],
css3: true,
slidesNavigation: true,
slidesNavPosition: 'bottom',
scrollingSpeed: 2000,
autoScrolling: true,
fitToSection: true,
scrollBar: true,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
controlArrows: true,
verticalCentered: true,
resize : false,
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsive: 0,
navigation: true,
anchors: ['firstPage', 'secondPage', 'thirdPage' , 'fourthPage' , 'fifthPage'],
navigationPosition: 'right',
navigationTooltips: ['First page', 'Second page', 'Third page' , 'Fourth page', 'Fifth page'],
slidesNavigation: true,
slidesNavPosition: 'bottom'
});
});
</script>
</head>
<body>
<div id="fullpage">
<div id="prlx_lyr_1"></div>
<div id="prlx_lyr_2"></div>
<div id="prlx_lyr_3"></div>
<div id="prlx_lyr_4"></div>
<div id="prlx_lyr_5"></div>
<div id="prlx_lyr_6"></div>
<div class="section" id="section0">
<h1>Welcome to my world</h1>
<h3>The story of the items that define me</h3>
</div>
<div class="section" id="section1">
<h2>My goal</h2>
<p>When I set out to create my culture board. I wanted to choose the items that best represented me as a whole.</p>
<p>I choose objects that fell into 4 categories and arranged them accordingly:</p>
<ul id="list">
<li>Hobbies/Interests</li>
<li>Snacks</li>
<li>Work</li>
<li>Soccer</li>
</ul>
<p>I played around with a number of different patterns before settling on my final arrangement. </p>
<p>My creative process is labeled below:</p>
</div>
<div class="section" id="section2">
<div class="slide" data-anchor="slide1">
<h2>Overview</h2>
<img src="images/slide1.jpg" alt="set up">
</div>
<div class="slide" data-anchor="slide2">
<h2>An earlier configuration</h2>
<img src="images/slide2.jpg" alt="close up">
</div>
<div class="slide" data-anchor="slide3">
<h2>Coins from various countries</h2>
<img src="images/slide3.jpg" alt="coins">
</div>
<div class="slide" data-anchor="slide4">
<h2>Clearly I love Flippy Floppies</h2>
<img src="images/slide4.jpg" alt="feet">
</div>
<div class="slide" data-anchor="slide5">
<h2>Soccer helps me think</h2>
<img src="images/slide5.jpg" alt="soccer face">
</div>
</div>
<div class="section" id="section3">
<h2>The final step</h2>
<p>After my culture board was complete I took it into Adobe After Effects to add motion.</p>
<p>In addition I keyed out my Ipad screen and put a video of me crushing Dortmund as Arsenal!</p>
<p>Finally, I recorded a voice over in audition to finish it off!</p>
<img class="edit" src="images/final1.jpg" alt="feet">
</div>
<div class="section" id="section4">
<h2>What it all adds up to</h2>
<video poster="images/knolling.jpg" controls>
<source src="videos/knollingvideo.mp4" type='video/mp4'/>
<source src="videos/knollingvideo.webm" type='video/webm'/>
</video>
</div>
</div>
</body>
</html>
On the third Page of the Example is written:
Just use autoScrolling:false
I would try this.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments