Jquery horizontal navigation next previous

JavaScript
1

Hello there,
I’m new on this website and a newbie in Jquery. I hope I could find some help here :). I’m trying to slide my horizontal webpage with next/previous button. On each click we go on the next slide. My problem, it doesn’t work. It works when I click on menu items but not on my next button or previous button.

Here my fiddle :
http://jsfiddle.net/jarod51/x66hA/3/

here my Jquery script :

$(function() {
    $('#next').bind('click',function(event){
         event.preventDefault();
        var $anchor = $(this);

$("html, body").stop().animate({
		               scrollLeft: $($anchor).offset().left
					
		           }, 1000);
		       });

It slides but not properly and not like when I click on items menu. Does anybody has an idea how to solve my problem ?
Regards,
Jarod.

2

I do not do JQUERY but you need an array and a counter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
body {
			width: 8000px;
			margin: 0;
		}

		.panel {
			width: 930px;
			float: left;
			padding-left: 30px;
			padding-right: 1040px;
			margin-top: 45px;
			background: #eee;

		}

		#banner {
			position: fixed;
		}

		#banner ul {
			line-height: 45px;
			margin: 0 30px;
			padding: 0;
		}

		#banner ul li {
			display: inline;
			margin-right: 30px;
		}
#wrap {

float: left;

}

/*]]>*/
</style></head>

<body>
<div id="banner" style="position:fixed;right:100px;top:300px;">
	<ul id="tst" >
<li><a href="#home">Home</a></li>
<li><a href="#newsletter">Newsletter</a></li>
<li><a href="#directions">Directions &amp; Opening Hours</a></li>
<li><a href="#contact">Contact us</a></li></ul>
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>

<div id="wrap" >
    <div id="home" class="panel">
        <h2>Home</h2></div>
    <div id="newsletter" class="panel">
			<h2>Newsletter</h2>
    </div>
    <div id="directions" class="panel">
			<h2>directions</h2>
    </div>
    <div id="contact" class="panel">
			<h2>contact</h2>
    </div>

</div>

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

var Scroll={

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1,n;
  if (o){
   n=o.n+ud;
   n=n<0?o.lgth:n>o.lgth?0:n;
   this.GoTo(id,n);
   return false;
  }
 },

 GoTo:function(id,n){
  var o=this['zxc'+id],s=window.innerHeight?[window.pageXOffset,window.pageYOffset]:document.documentElement.clientHeight?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop],t;
  if (o&&o.a[n]&&n!=o.n){
   t=o.a[n].offsetLeft;
   this.animate(o,s,[t,s[1]],new Date(),o.ms*Math.abs((t-s[0])/o.a[1].offsetLeft));
   o.n=n;
   return false;
  }
 },

 init:function(o){
  var id=o.ParentID,ms=o.Animate,p=document.getElementById(id),as=p?p.getElementsByTagName('A'):[],a,z0=0;
  if (as[0]){
   o.a=[];
   for (;z0<as.length;z0++){
    a=as[z0].href&&document.getElementById(as[z0].href.split('#')[1])?document.getElementById(as[z0].href.split('#')[1]):null
    if (a){
     this.addevt(as[z0],'click','GoTo',id,o.a.length);
     o.a.push(a);
    }
   }
   a=document.getElementById(o.PrevID);
   a?this.addevt(a,'click','Next',id,-1):null;
   a=document.getElementById(o.NextID);
   a?this.addevt(a,'click','Next',id,1):null;
   o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
   o.n=0;
   o.lgth=o.a.length-1;
   this['zxc'+id]=o;
  }
 },

 animate:function(o,f,t,srt,mS){
  clearTimeout(o.to);
  var oop=this,ms=new Date()-srt,n=(t[0]-f[0])/mS*ms+f[0];
  if (isFinite(n)){
   window.scrollTo(n,t[1]);
  }
  if (ms<mS){
   o.to=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
  }
  else {
   window.scrollTo(t[0],t[1]);
  }
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
 }

}

Scroll.init({
 ParentID:'tst',
 PrevID:'prev',
 NextID:'next',
 Animate:1200
});

/*]]>*/
</script>


</body>

</html>
3

You’re basically trying to create a carousel, which can be surprisingly tricky to get right. I try to not fill my stuff with libraries and 3rd party options, but carousels are the few things I usually opt for a 3rd party on because they are tricky and a pain in the butt.

I just mentioned this in another thread and I’m in no way affiliated with him. But, I’ve played around with this a bit and it’s really good.

https://github.com/kenwheeler/slick

http://kenwheeler.github.io/slick/

The first demo on the page is what you probably want. “Single Item”

Of course, if your goal is to do this for the sake of doing this, disregard my whole post. :slight_smile: