Currently attempting to implement a jQuery plugin to achieve a pagination effect similar to
The plugin I came across is linked at
Although the usage seems straightforward, I am encountering difficulties making it function correctly.
Displayed below is the HTML I have:
<head>
<title>Aldi Rebrand</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage();
});
</script>
</head>
<body class="red">
<div id="navBar">
<a href="index.html"><img id="navLogo" src="images/navLogo.png"></a>
<ul>
<li class = "navLink mainLink"><a href="index.html">Work</a></li>
<li class = "navLink mainLink"><a href="about.html">About</a></li>
<li class = "navLink mainLink"><a href="https://ggann.tumblr.com">Blog</a></li>
</ul>
</div>
<div id="fullpage">
<div class="section">
<div id="aldiPhoto"></div>
<div id="descriptionAldi">
<h2>ALDI Rebrand <span>BRANDING | LOGO | PRINT</span></h2>
<p class="intro"><strong>ALDI</strong> is an international grocer, spanning from Germany to The United States and many other countries around the world.</p>
<p class="prjctDescription">The premise behind this semester long project was to immerse ourselves in the company/brand we were assigned. I was assigned ALDI. In this scenario, the goal of the rebrand was to convey a new “fresh and local” side to ALDI and their proposed farmers market addition to their stores. We were asked to create a brand new logo, at least four pieces of collateral and a brand guideline to demonstrate our research, branding applications and flexibility.</p>
<div class="btnDiv">
<a href="https://dribbble.com/shots/1869394-ALDI-Rebrand" class="btnText"><div class="btn1"><p>VIEW ON DRIBBBLE</p></div></a>
<a href="https://www.behance.net/gallery/22556203/ALDI-Rebrand" class="btnText"><div class="btn2"><p>VIEW ON BEHANCE</p></div></a>
</div>
</div>
</div>
<div class="section">
<div id="aldiPage2"></div>
</div>
<div class="section">
<div id="aldiPage3"></div>
</div>
</div>
<div class="ticker"><p class="currentPage">1</p><div class="tickerBtm"><p class="maxPage">3</p></div></div>
</body>
The provided CSS for the site:
a {
color: #ffffff;
font-size: 1em;
font-family: Helvetica, Arial, sans-serif;
cursor: pointer;
text-decoration: none;
}...Utilized the designated CSS and JS files as shown in the head of the HTML. However, the page appears as if only the first section is visible, with the other two sections not displaying at all.
Struggling to pinpoint where I may have gone wrong in this implementation.