CODEWITHSUNDEEP
javascriptjquery
Damir
Damir

Reputation: 47

jquery content slider sliding

This is the html part of the sliders navigation:

<div id="button">
     <a class="button1 active" rel="1" href="#"></a>
     <a class="button2" rel="2" href="#"></a>
     <a class="button3" rel="3" href="#"></a>
</div>

This is the complete jQuery code for the slider:

$(document).ready(function (){
  $('#button a').click(function(){
    var integer = $(this).attr('rel');
    /*----- Width of div mystuff (here 160) ------ */
    $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})
    $('#button a').each(function(){
      $(this).removeClass('active');
      if($(this).hasClass('button'+integer)){
        $(this).addClass('active')
      }
    });
  });   
});

i am building a content slider for an assignment on college and I am having trouble following this code.

You can find the complete code for this slider here.

Our 3 links have rel attributes with values 1,2 and 3. This line of jQuery calculates how much will the slider slide:

$('#myslide .cover').animate({left:-160*(parseInt(integer)-1)})

So if the variable integer is 1 it will be -160*(1-1)=0 - the slider doesn't move if its 2 the result will be -160 and it will move to the right for 160px. And if its 3 it will move to the right for 320px.

How does this code moves the slide to the left? It works if you test the demo on the page, but I don't understand how? Can someone explain it to me please?

Upvotes: 0

Views: 1049

Answers (3)

Greg Wiley
Greg Wiley

Reputation: 323

If your integer is 1 and you are moving it to the left, your formula would be (-160)*-1-1, which would give you -320 (moving the slider to the left). If it is positive you would be multiplying by a positive number, moving the slider the the right direction.

Hope that helps.

Upvotes: 0

Kevin B
Kevin B

Reputation: 95062

Negative left values will cause the element to move to the left of the 0 position. When you animate from 0 to -160, it will move left.

http://jsfiddle.net/vrRfu/

Am I misunderstanding the question?

enter image description here

A positive integer multiplied by -160 results in a negative left position causing the element to move left.

Upvotes: 1

Mark E
Mark E

Reputation: 3483

The secret in this slides is the '', cause you have to put the three paragraphs in the same line but make the div the size of only one, when you change the 'overflow' property to hidden all the stuff that is out of the will disappera so it is like a window which only lñet you see the thing that are infront, and finally with the '.animate()' method you can move things to be infront of the "window"

Upvotes: 0

Related Questions