$(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll({offset:-250});
var LinkCounter = 0;
$('#prev').mousedown(function(){
PrevCounter = LinkCounter--;
this.href='#box' + LinkCounter;
$('#next').attr({href: '#box' + PrevCounter});
});
$('#next').mousedown(function(){
PrevCounter = LinkCounter++;
this.href='#box' + LinkCounter;
$('#prev').attr({href: '#box' + PrevCounter});
});
});
<div id="header">
<h1>Silver Bramham<br />
Make up artist</h1>
<p>
Contact:
+44 7970 69 68 01
[email protected]
</p>
<div id="nav">
<ul>
<li><a id="prev" href="#box0">Prev</a></li>
<li><a id="next" href="#box1">Next</a></li>
</ul>
</div> <!-- nav -->
</div>
<div id="container">
<div id="box0" class="firstbox">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/00-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box1" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/01-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box2" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/02-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box3" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/03-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box4" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/04-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box5" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/05-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box6" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/06-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box7" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/07-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box8" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/08-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box9" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/09-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box10" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/10-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box11" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/11-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box12" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/12-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box13" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/13-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box14" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/14-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box15" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/15-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box16" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/16-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box17" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/17-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box18" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/18-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
<div id="box19" class="box">
<div class='storyImage'>
<img src='http://www.invisiblewebdesign.co.uk/temp/silver/images/19-01.png' />
<div class='morelink'><a href='#'><img src='images/more_link.png' border='0' /></a></div>
</div>
</div>
</div>