angular-fullpage.js
Version:
A simple angular directive for fullPage.js
50 lines (47 loc) • 1.76 kB
HTML
<ul id="menu" ng-click="vm.moog('asd')" >
<li data-menuanchor="firstPage"><a>First slide</a></li>
<li data-menuanchor="secondPage"><a>Second slide</a></li>
<li data-menuanchor="3rdPage"><a>Third slide</a></li>
<li data-menuanchor="4thpage"><a>Fourth slide</a></li>
</ul>
<div full-page options="vm.mainOptions">
<div class="section " id="section0">
<h1>fullPage.js</h1>
<p>Create Beautiful Fullscreen Scrolling Websites</p>
<img src="images/fullPage.png" alt="fullPage" />
</div>
<div class="section active" id="section1">
<div class="slide">
<div class="intro">
<h1>Create Sliders</h1>
<p>Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
<img src="images/slider.png" alt="slider" /> <br/>
<button ng-click="vm.addSlide();">Click Me to Add another Slide!</button>
</div>
</div>
<div ng-repeat="slide in vm.slides" class="slide">
<div class="intro" ng-click="vm.moog('ddd')" >
<img ng-src="{{ slide.src }}" alt="simple" />
<h1>{{ slide.title }}</h1>
<p>{{ slide.description }}</p>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1 ng-click="vm.moog('sss')" >Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="images/example2.png" alt="example" />
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="images/tablets.png" alt="tablets" />
</div>
</div>