May 16, 2012 Leave a comment
There are many Image Scroller on web, But their code is difficult to read/ Understand. Infact I am not a developer, I know very basic of jQuery. So I decided to code myself a very Basic Code. I have taken the help from [http://api.jquery.com/category/effects/].
*Note [The Code below written from scratch so there may be some small mistakes. Suggestions are most welcome]
The Procedure I followed / Problems I faced
1) First I tried Code for a “Animate Function”.
2) Then I put the Images in animating div.
3) Styled the thumbnail images.
4) Problem occurred at the limit of scrolling to right and left.
5) Then I searched for a code that counts the particular Element in an HTML Element.
6) Then I calculated the total width of space images had taken with margin, padding and border.
7) I had the width of Main Div and The Width of Space images had taken : that I used for Limiting the Scroller Div at right position.
8) And for left position I taken the Limit as 0 [Zero] / From the left position of Main Div.
9) However I tried for stopping the animation, Scroller Div passes its limit when I clicked the Button no. of times quickly.
10) When I searched for this issue, I came to know that the process are in Queue then run one after another.Second process wait Until the first process gets completed.