Fullscreen Javascript Slide navigation
Today – new pure javascript tutorial-demonstration. Result page will contain 16 slides (pages). Four in each row, four columns, plus we will add animated navigation to them through css3 arrows (at sides of screen). Plus, we will have mini-navigation bar for better navigation.
Live Demo
download in package
Ok, download the example files and lets start coding !
Step 1. HTML markup
In our markup you can see 16 ‘pages’ and mini-navigation for our slides. Here it is.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Fullscreen Javascript Slide navigation | Script Tutorials</title> <link href="css/layout.css" type="text/css" rel="stylesheet"> <script src="js/main.js"></script> </head> <body> <div class="container" id="container"> <div id="pages"> <div id="page1"> <a href="#page2" class="go right"></a> <a href="#page5" class="go bottom"></a> </div> <div id="page2"> <a href="#page1" class="go left"></a> <a href="#page3" class="go right"></a> <a href="#page6" class="go bottom"></a> </div> <div id="page3"> <a href="#page2" class="go left"></a> <a href="#page4" class="go right"></a> <a href="#page7" class="go bottom"></a> </div> <div id="page4"> <a href="#page3" class="go left"></a> <a href="#page8" class="go bottom"></a> </div> <div id="page5"> <a href="#page1" class="go top"></a> <a href="#page6" class="go right"></a> <a href="#page9" class="go bottom"></a> </div> <div id="page6"> <a href="#page5" class="go left"></a> <a href="#page2" class="go top"></a> <a href="#page7" class="go right"></a> <a href="#page10" class="go bottom"></a> </div> <div id="page7"> <a href="#page6" class="go left"></a> <a href="#page3" class="go top"></a> <a href="#page8" class="go right"></a> <a href="#page11" class="go bottom"></a> </div> <div id="page8"> <a href="#page7" class="go left"></a> <a href="#page4" class="go top"></a> <a href="#page12" class="go bottom"></a> </div> <div id="page9"> <a href="#page5" class="go top"></a> <a href="#page10" class="go right"></a> <a href="#page13" class="go bottom"></a> </div> <div id="page10"> <a href="#page9" class="go left"></a> <a href="#page6" class="go top"></a> <a href="#page11" class="go right"></a> <a href="#page14" class="go bottom"></a> </div> <div id="page11"> <a href="#page10" class="go left"></a> <a href="#page7" class="go top"></a> <a href="#page12" class="go right"></a> <a href="#page15" class="go bottom"></a> </div> <div id="page12"> <a href="#page11" class="go left"></a> <a href="#page8" class="go top"></a> <a href="#page16" class="go bottom"></a> </div> <div id="page13"> <a href="#page9" class="go top"></a> <a href="#page14" class="go right"></a> </div> <div id="page14"> <a href="#page13" class="go left"></a> <a href="#page10" class="go top"></a> <a href="#page15" class="go right"></a> </div> <div id="page15"> <a href="#page14" class="go left"></a> <a href="#page11" class="go top"></a> <a href="#page16" class="go right"></a> </div> <div id="page16"> <a href="#page15" class="go left"></a> <a href="#page12" class="go top"></a> </div> </div> <div id="nav"> <div>Fullscreen Javascript Slide navigation</div> <div style="width:130px"> <a href="#page1" class="go"></a> <a href="#page2" class="go"></a> <a href="#page3" class="go"></a> <a href="#page4" class="go"></a> <a href="#page5" class="go"></a> <a href="#page6" class="go"></a> <a href="#page7" class="go"></a> <a href="#page8" class="go"></a> <a href="#page9" class="go"></a> <a href="#page10" class="go"></a> <a href="#page11" class="go"></a> <a href="#page12" class="go"></a> <a href="#page13" class="go"></a> <a href="#page14" class="go"></a> <a href="#page15" class="go"></a> <a href="#page16" class="go"></a> </div> <div><a href="https://www.script-tutorials.com/fullscreen-javascript-slide-navigation/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a></div> </div> </div> </body> </html>
Step 2. CSS
Now – stylesheets for our slides:
css/layout.css
*{ margin:0; padding:0; } body { background-color:#aaa; color:#fff; font:16px Arial,sans-serif; font-weight:700; margin:0px; padding:0px; background:#111; width:100%; height:100%; } a.stuts,a.stuts:visited{ color: #FCFCFC; font-size: 14px; text-decoration: none; } .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { position: absolute; left: 0; top: 0; background: #000; overflow: hidden; width: 100%; height: 100%; } #pages { left:0; position:absolute; top:0; } #nav { background-color:rgba(0, 0, 0, 0.8); margin:0; outline:#333 solid 1px; padding:10px; position:fixed; right:200px; top:50px; width:200px; } #nav div a.go { background:#333; float:left; height:25px; margin:3px; overflow:hidden; text-decoration:none; width:25px; } #nav div a.go:visited,#nav div a.visited { background-color:#666; } #nav div a.go:active,#nav div a.active { background-color:#fff !important; } #nav div a.go:hover,#nav div a.go:focus { background-color:#00f; } #pages > div { height:1100px; position:absolute; width:1700px; } #page1 { background:url(../images/1.jpg) no-repeat center center; left:0; top:0; } #page2 { background:url(../images/2.jpg) no-repeat center center; left:1800px; top:0; } #page3 { background:url(../images/3.jpg) no-repeat center center; left:3600px; top:0; } #page4 { background:url(../images/4.jpg) no-repeat center center; left:5400px; top:0; } #page5 { background:url(../images/5.jpg) no-repeat center center; left:0; top:1300px; } #page6 { background:url(../images/6.jpg) no-repeat center center; left:1800px; top:1300px; } #page7 { background:url(../images/7.jpg) no-repeat left center; left:3600px; top:1300px; } #page8 { background:url(../images/8.jpg) no-repeat center center; left:5400px; top:1300px; } #page9 { background:url(../images/9.jpg) no-repeat center center; left:0; top:2600px; } #page10 { background:url(../images/10.jpg) no-repeat center center; left:1800px; top:2600px; } #page11 { background:url(../images/11.jpg) no-repeat center center; left:3600px; top:2600px; } #page12 { background:url(../images/12.jpg) no-repeat center center; left:5400px; top:2600px; } #page13 { background:url(../images/13.jpg) no-repeat center center; left:0; top:3900px; } #page14 { background:url(../images/14.jpg) no-repeat center center; left:1800px; top:3900px; } #page15 { background:url(../images/15.jpg) no-repeat center center; left:3600px; top:3900px; } #page16 { background:url(../images/16.jpg) no-repeat center center; left:5400px; top:3900px; } #pages .left { border-bottom:transparent solid 50px; border-right:#FFF solid 80px; border-top:transparent solid 50px; height:0; left:20px; position:absolute; top:50%; width:0; } #pages .right { border-bottom:transparent solid 50px; border-left:#FFF solid 80px; border-top:transparent solid 50px; height:0; position:absolute; right:20px; top:50%; width:0; } #pages .top { border-bottom:#FFF solid 80px; border-left:transparent solid 50px; border-right:transparent solid 50px; height:0; left:50%; position:absolute; top:20px; width:0; } #pages .bottom { border-left:transparent solid 50px; border-right:transparent solid 50px; border-top:#FFF solid 80px; bottom:20px; height:0; left:50%; position:absolute; width:0; } #pages .left:hover { border-right:red solid 80px; } #pages .right:hover { border-left:red solid 80px; } #pages .top:hover { border-bottom:red solid 80px; } #pages .bottom:hover { border-top:red solid 80px; } #nav > div { margin:10px auto; overflow:hidden; text-align:center; }
Step 3. JS
ANd now – our javascript code:
js/main.js
var navi = { // variables aPages : [], aLinks : [], tween : {}, oParent : null, oPages : null, bRunning : null, sTargPage : null, sCurPage : null, bHash : null, sOldH : null, bUpdateH : true, // initialization init : function (aParams) { this.oPages = document.getElementById(aParams.pages_id); this.oParent = document.getElementById(aParams.parent_id); var aAEls = this.oParent.getElementsByTagName('a'); var i = 0; var p = null; while (p = aAEls[i++]) { if (p.className && p.className.indexOf('go') >= 0) { var sHref = p.href.split('#')[1]; var oDst = document.getElementById(sHref); if (oDst) { // fill-in pages array this.aPages[sHref] = { oObj: oDst, iXPos: -oDst.offsetLeft, iYPos: -oDst.offsetTop }; // fill-in links array this.aLinks.push({a: p, oObj: oDst}); p.onclick = function () { navi.goto(this.href.split('#')[1], aParams.duration); return false; } } } } this.resize(); if ('onhashchange' in window) { if (location.hash !== '' && location.hash !== '#') { this.sOldH = location.hash.substring(1); this.goto(this.sOldH, -1); } else this.goto('page1', -1); this.bHash = true; window.onhashchange = function() { if (location.hash.substring(1) !== navi.sOldH) { navi.sOldH = location.hash.substring(1); if (navi.sOldH == '') { navi.bUpdateH = false; } navi.goto(navi.sOldH, aParams.duration); } return false; } } }, // on resize resize : function () { var iCurW = this.oParent.offsetWidth; // current sizes var iCurH = this.oParent.offsetHeight; for (var i in this.aPages) { // for each page var oPage = this.aPages[i]; var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes var iNewY = Math.round(oPage.oObj.offsetTop * iCurH / oPage.oObj.offsetHeight); oPage.oObj.style.left = iNewX + 'px'; oPage.oObj.style.top = iNewY + 'px'; oPage.oObj.style.width = iCurW + 'px'; oPage.oObj.style.height = iCurH + 'px'; oPage.iXPos = -iNewX; oPage.iYPos = -iNewY; if (this.sCurPage) this.goto(this.sCurPage, -1); } }, goto : function (sHref, iDur) { this.tween.iStart = new Date() * 1; this.tween.iDur = iDur; this.tween.fromX = this.oPages.offsetLeft; this.tween.fromY = this.oPages.offsetTop; this.tween.iXPos = this.aPages[sHref].iXPos - this.tween.fromX; this.tween.iYPos = this.aPages[sHref].iYPos - this.tween.fromY; this.sTargPage = sHref; if (! this.bRunning) this.bRunning = window.setInterval(this.animate, 24); }, animate : function () { var iCurTime = (new Date() * 1) - navi.tween.iStart; if (iCurTime < navi.tween.iDur) { var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1; navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px'; navi.oPages.style.top = Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px'; } else { navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px'; navi.oPages.style.top = Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px'; window.clearInterval(navi.bRunning); navi.bRunning = false; navi.sCurPage = navi.sTargPage; var i = 0; var p = null; while (p = navi.aLinks[i++]) { if (p.oObj.id == navi.sCurPage) { if (p.a.className.indexOf('visited') >= 0 ) { p.a.className = p.a.className.replace('visited', 'active'); } else p.a.className += ' active'; p.visited = true; } else if (p.visited) { p.a.className = p.a.className.replace('active', 'visited'); } } if (navi.bHash) { if (navi.bUpdateH) { navi.sOldH = navi.sCurPage; window.location.hash = navi.sCurPage; } navi.bUpdateH = true; } } } } window.onload = function() { // page onload navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000}); } window.onkeydown = function(event){ // keyboard alerts switch (event.keyCode) { case 37: // Left key var iPage = navi.sCurPage.substring(4) * 1; iPage--; if (iPage < 1) { iPage = 1; } navi.goto('page' + iPage, 1000); break; case 39: // Right key var iPage = navi.sCurPage.substring(4) * 1; iPage++; if (iPage > 16) { iPage = 16; } navi.goto('page' + iPage, 1000); break; } };
Live Demo
download in package
Conclusion
Finally we have prepared interested result! I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!
Great tutorial.Thanks for Sharing!
Hi!
I’m getting this error:
SCRIPT5007: Unable to get value of the property ‘iXPos’: object is null or undefined
newSlider.js, line 93 character 9
It shows up when I load the page. I tried to adapt your code to a page I’m developing, any idea why this happens?
Thanks in advance!
Hello Alexandre,
What is your browser?
Because our demo should work well in most of browsers (FF, Chrome and IE).
Generally, that iXPos property is filled for each page during initialization, look at code at line 30.
iXPos: -oDst.offsetLeft,
so, the same value (of iXPos) is at line 93 too.
Hello, could you please explain (comment a bit more the code) how did you manage to make the mini-navigation?
thanks!!
Hello Pol,
But, this is just ordinary DIV with ID=nav, try to inspect styles of this DIV
Thank you Andrew, this is great, i learnt a lot just by looking at your codes.
is it possible to utitlize the z-index to give it more 3D depth to the gallery?
Hi Adam,
Which gallery did you mean? It is not the gallery, but different ‘pages’. Or do you want to apply some 3d styles for the navigation element itself?