
Include these Files
/* Attach the Table CSS and Javascript */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/css/jquery.fullPage.css"> <script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/css/examples.css"></script> <script src="stylesheet" href="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/transition-style-in-heading-on-hover/js/scrolloverflow.js"></script> <script src="stylesheet" href="https://portal.domainshostweb.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 add your code into this ID #fullpage
You 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>
You can make also slider from this .slide
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){
}
});
});
Click here to Download Code Download