Include these Files
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.owaisbikiya.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/css/jquery.fullPage.css" media="all"/>
<link rel="stylesheet" type="text/css" href="http://www.owaisbikiya.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/css/examples.css" media="all"/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://www.owaisbikiya.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/js/scrolloverflow.js"></script>
<script type="text/javascript" src="http://www.owaisbikiya.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/js/jquery.fullPage.js"></script>
You can click to see demo of full page
Click for DemoYou can create new section by using this class.section here is the below code.
<div id="fullpage">
//Section 1//
<div class="section" id="section0">
<h1>fullPage.js</h1>
</div>
//Section 2//
<div class="section" id="section1">
<h1>fullPage.js</h1>
</div>
</div>
Use the Below code for slider
<div class="section" id="section2">
<div class="slide "><h1>Simple Demo</h1></div>
<div class="slide active"><h1>Only text</h1></div>
<div class="slide"><h1>And text</h1></div>
<div class="slide"><h1>And more text</h1></div>
</div>
You can use this script for full page.
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', 'fourthPage'],
sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C', '#C63D0F'],
navigation: true,
navigationPosition: 'right',
navigationTooltips: ['First page', 'Second page', 'Third', 'Fourth page'],
responsiveWidth: 900,
afterResponsive: function(isResponsive){
}
});
});