Question

What I have Is a centered div in my webpage containing a picture that I want to slide from right to left so that user can see another picture..the effect I want to achieve is this

hope you can help me out finding out how to do it

thanks

Answer 1

SLIDER DEMO

var imgN = $('#slider img').length;
var galW = $('#gallery').outerWidth(true);

$('#slider, #info').width(galW*imgN);

$('#nav li').click(function(){
  var ind = $(this).index();
  $('#slider').stop(1).animate({left: '-'+galW*ind },1500);
  $('#info').stop(1).delay(250).animate({left: '-'+galW*ind },1800);
  $(this).addClass('active').siblings('li').removeClass('active');
});

HTML:

  <div id="gallery">
    <div id="slider">
      <img src="http://dummyimage.com/700x350/9ae/fff&text=1">
      <img src="http://dummyimage.com/700x350/e44/fff&text=2">
      <img src="http://dummyimage.com/700x350/878/fff&text=3">
    </div>


  <div id="nav">
    <ul>
      <li class="active">Go to slide 1</li>
      <li>Go to slide 2</li>
      <li>Go to slide 3</li>
    </ul>
  </div>

    <div id="info">
      <div class="info"><h3>Info panel 1</h3></div>
      <div class="info"><h3>Info panel 2</h3></div>
      <div class="info"><h3>Info panel 3</h3></div>

    </div>
  </div>

CSS:

  #gallery{
    width:700px;
    height:490px;
    position:relative;
    margin:20px auto;
    background:#eee;
    overflow:hidden;
  }
  #slider{
    position:absolute;
  }
  #slider img{
    position:relative;
    float:left;
  }
  #nav{
    width:700px;
    z-index:2;
    position:absolute;
    top:305px;
    text-align:center;
  }
  #nav li{
    cursor:pointer;
    display:inline;
    background:#ddd;
    padding:10px;
    margin:1px;
    border-bottom:1px solid #999;
    -moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px; 
  }
  #nav li.active{
    background:#eee;
    border-bottom:1px solid #eee;
  }

  #info{
    position:absolute;
    top:350px;
    height:140px;
    width:700px;
    background:#eee;
    border-top:1px solid #999;

  }
  div.info{
    position:relative;
    float:left;
    width:650px;
    padding:10px 25px;
    height:120px;
  }