Help implementing slider

JavaScript
1

Hi!

I am a graphic/product designer in the process of making my first portfolio website.

The basic’s of html/ccs was learned at codeacademy.com and various youtube videos starting about 3 weeks ago so my skills are somewhat limited.

I’ve gotten the page this far but now im stuck. I want to add a slider so that when your press “about” or “contact” the dark-grey content slides to the left and make way for the about or contact content which should slide in from the right. The about page would have a photo and some text about me, the contact page would have a contact form.

I have searched and found various jquery sliders such as:

http://liquidslider.com/

I have been trying to get this to work on my site for over a week without any luck.

The main problem is that i don’t understand how to make my div a part of the slide and how do add editable divs for the about and contact content.

Is there someone who can help me or at least point me in right direction ?

The site in it’s current state can be seen at: http://www.rogerjansson.com/

Any form of assistance would be much appreciated.

2 
<!DOCTYPE HTML>
<html>
  <head>
  	<meta charset="UTF-8">
    <title>Roger Jansson Design</title>
    <link rel="stylesheet" media="screen and (min-width: 0px)" href="http://www.rogerjansson.com/css/small.css">
    <link rel="stylesheet" media="screen and (min-width: 1500px)" href="http://www.rogerjansson.com/css/big.css">
<style type="text/css">
/*<![CDATA[*/
html, body {height: 100%;}

body {
    margin: 0px;
	padding: 0px;
	font-family: 'Droid Sans', sans-serif;
}

#header-wrapper {
	position: relative;
	height: 20%;
	background-color: #F6F5F1;
}


.logobox {
	position: absolute;
	margin: auto;
    top: 0; left: -60%; bottom: 0; right: 0;
	height: 90px;
	width: 240px;
}


/** MENU */

#menu
{
	position: absolute;
	top: 40%;
	left: 62.5%;
}

#menu ul
{
	margin: 0;
	list-style: none;
	line-height: normal;
}

#menu li
{
display: inline;
list-style-type: none;
padding-right: 30px;
}




#menu a
{
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Droid Sans', sans-serif;
	font-size: 80%;
	font-weight: bold;
	color: #404040;

}

#menu a:hover
{
	color: #FF6666;
	text-decoration: underline;
}

#menu .active a:active
{
	color: #FF6666;
	text-decoration: underline;
}


#menu a:hover
{
	text-decoration: none;
}

/** CONTENT */

#featured-wrapper {
	position: relative;
	height: 72.5%;
	background-color: #404040;

}

#designer {
	position: absolute;
	top: 41%;
	left: 11.5%;
	letter-spacing: 1px;
	font-size: 500%;
	font-weight: 500;
	color: #F6F5F1;
	font-family: 'Droid Sans', sans-serif;
}


#heading1, #heading2, #heading3, #heading4{
	position: absolute;
	top: 310px;
	left: 500px;
    opacity:0;
    font-family: 'Droid Sans', sans-serif;
    letter-spacing: 1px;
	font-size: 0.7em;
	font-weight: 500;
	color: #F6F5F1;
}


#slogan_section {
 	position:absolute;
 	width:40%;
 	height:10%;
 	top: 30%;
 	left: 11.8%;
}

#slogan_section DIV {
	position: absolute;
    font-family: 'Droid Sans', sans-serif;
    letter-spacing: 1px;
	font-size: 300%;
	font-weight: 500;
	color: #F6F5F1;
}


#works-wrapper {
	height: 80%;
	background-color: #F6F5F1;
}

#works {
	padding-top: 4%;
	text-align: center;
	letter-spacing: -1px;
	font-size: 40px;
	font-weight: 500;
	color: #F6F5F1;
	font-family: 'Droid Sans', sans-serif;
}

.comingsoon {
	padding-top: 10%;
	text-align: center;
	letter-spacing: -1px;
	font-size: 1em;
	font-weight: 100;
	color: #404040;
	font-family: 'Droid Sans', sans-serif;
}

/** FOOTER */

#footer-wrapper {
	height: 20%;
	background-color: #404040;
}

.copyright_text
{
position: relative;
top: 85%;
margin: 0 auto;
font-size: 10px;
text-align: center;
color: #F6F5F1;
font-family: 'Droid Sans', sans-serif;
font-weight: 100;
letter-spacing: 0.5px;

}

#container {
	width: 930px;
	margin: 0 auto;
	text-align: center;
	padding-top: 2%;
}

.behance {
	padding-left: 3.5%;
	padding-right: 3.5%;
}
/*]]>*/
</style>

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:700' rel='stylesheet' type='text/css'>


   <!-- Vertical scroll -->


<!-- Scroll to top -->

    <style type="text/css">
      .scrollup{
      width:32px;
      height:32px;
      text-indent:-9999px;
      opacity:0.5;
      position:fixed;
      bottom:5%;
      right:3%;
      display:none;
      background: url('images/icon_top.png') no-repeat;
    }
    </style>



  </head>
    <body>

  <!-- HEADER -->

        <div id="header-wrapper">
          <div id="logo">
            <div class="logobox">
  		        <img src="images/logo2dark.png">
            </div>
            <div id="menu">
              <ul>
                <li><a href="" onclick="zxcSlider.GoTo('slogan_section',0); return false;" >Home</a></li>
                <li><a href="#" >Works</a></li>
                <li><a href="#" onclick="zxcSlider.GoTo('slogan_section',2); return false;">About</a></li>
                <li><a href="mailto:info@rogerjansson.com">Contact</a></li>
              </ul>
            </div>
          </div>
        </div>

<!-- CONTENT -->

      <div id="featured-wrapper">
        <div id="featured" class="container">
            <span id="heading1">LOGO</span>
		        <span id="heading2">GRAPHIC</span>
		        <span id="heading3">PRODUCT</span>
		        <span id="heading4">WEB</span>
		        <header id="designer">DESIGNER</header>
	       </div>
            <div class="slogan js-slogan" id="slogan_section" style="height:300px;border:solid red 1px;" >
			   <div>
					<img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" />			GRAPHIC
			   </div>
			   <div>
								WEB
			   </div>
			   <div>
				  <input name="" /><br />
				  <input name="" /><br />
			   </div>
			   <div>
								PRODUCT
			   </div>
			  </div>
        </div>

<!-- WORKS -->

      <div id="works-wrapper">
        <div id="works">
			    <header class="comingsoon">Coming soon<header/>
		    </div>
      </div>

<!-- FOOTER -->

    <div id="footer-wrapper">
    	<div class="copyright_text">
        Copyright © 2013 www.rogerjansson.com / All Rights Reserved
		  </div>
      <div id="container">
          <a href="http://www.facebook.com/rogerjanssondesign" target="_blank"><img src="images/facebook.png"></a>
          <a class="behance" href="http://www.behance.net/rogerjansson" target="_blank"><img src="images/behance.png"></a>
          <a href="https://twitter.com/r_j_design" target="_blank"><img src="images/twitter.png"></a>
      </div>
    </div>
	</div>

<!-- Skills slider -->

<script type="text/javascript">
/*<![CDATA[*/

var zxcSlider={

 Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id];
  o?o.to=setTimeout(function(){ oop.rotate(o,true); },ms||500):null;
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.c+ud);
  }
 },

 GoTo:function(id,c){
  var o=this['zxc'+id];
  if (o&&o.ary[c]){
   this.Pause(id);
   if (c!=o.c){
    o.ud=c>o.c?1:-1;
    this.rotate(o,c);
   }
  }
 },

 init:function(o){
  var id=o.ID,ud=o.Direction,ms=o.Animate,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
  if (p){
   var clds=p.childNodes,sz=p.offsetWidth,ary=[],z0=0;
   for (;z0<clds.length;z0++){
    if (clds[z0].nodeType==1){
     clds[z0].style.position='absolute';
     clds[z0].style.left=(ary.length>0?-sz:0)+'px';
     clds[z0].style.width=sz+'px';
     ary.push([clds[z0],'left']);
    }
   }
   o.id=id;
   o.ary=ary;
   o.lgth=ary.length-1;
   o.sz=sz;
   o.ms=typeof(ms)=='number'&&ms>10?ms:1000;
   o.hold=typeof(hold)=='number'&&hold>10?hold:o.ms*4;
   o.ud=typeof(ud)=='number'&&ud<0?-1:1;
   o.c=0;
   p.style.overflow='hidden';
   this['zxc'+id]=o;
   typeof(srt)=='number'&&srt>10?this.Auto(id,srt):null;
  }
 },

 rotate:function(o,a){
  var c=o.c;
  this.Pause(o.id);
  o.auto=a===true;
  c=o.auto?c+o.ud:a;
  c=c>o.lgth?0:c<0?o.lgth:c;
  this.animate(o,o.ary[o.c],0,o.sz*(o.ud>0?1:-1),new Date(),o.ms);
  this.animate(o,o.ary[c],o.sz*(o.ud>0?-1:1),0,new Date(),o.ms,true);
  o.c=c;
 },

 animate:function(o,a,f,t,srt,mS,nxt){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[0].style[a[1]]=n+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
  }
  else {
   a[0].style[a[1]]=t+'px';
   o.auto&&nxt?oop.Auto(o.id,o.hold):null;
  }
 }


}

zxcSlider.init({
 ID:'slogan_section', // the unique ID name of the parent DIV.                 (string)
 Direction:-1,         //(optional) the slide direction, 1 = forward, -1 =back. (number, default = 1 = forward)
 Animate:150,         //(optional) the animation duration in millisec.         (number, default = 1000)
 AutoHold:2500,       //(optional) the auto rotate delay in millisec.          (number, default = Animate*4)
 AutoStart:false       //(optional) the auto rotate start delay in millisec.    (number, default = no auto start)
})
/*]]>*/
</script>

<!-- Skills slider END-->
<a href="#" class="scrollup">Scroll</a>
 </body>
</html>
3

Thanks!

Ill try to figure the rest out using this.