Reputation: 189

Sliding horizontal jquery

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

Upvotes: 0

Answers (4)

Roko C. Buljan

Reputation: 206078

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;
  }

Upvotes: 2

Rich Bradshaw

Reputation: 72975

Personally, I'd make a large div with all the content inside it, floated left. I'd then animate the outside div by using jQuery to animate the left property on it in old browsers, or by using CSS transforms/transitions in normal browsers.

More specifically, the HTML would look like this for the slider:

<div id="container">
    <div id="sliding_bit">
        <img src="" alt="" />
        <img src="" alt="" />
        <img src="" alt="" />
    </div>
</div>

I'd make the outside container say 960px wide and 300px high, and set overflow hidden. I'd make the sliding_bit the width of all the inside bits added together (e.g. 3x width of images). I'd float the images left in the slider.

I'd then animate the sliding_bit div using transitions/transforms or animation.

For an example, have a look at http://focalstrategy.com/blog/2010/08/howto/an-animated-image-slider-that-works-in-internet-explorer/

Upvotes: 0