Question

I am looking to write a javascript div slider. I tried JQuery plugins for div sliding. However since our application is dynamically generated, somehow the current jQuery plugins don’t seem to render the slider correctly.

Hence thought to see if I could write a simple slider that will toggle two divs in a slider way.

Basically, I would have two div and one left button and one right bottom.

<img src='images/left'></img>
<div id='content-one'>My First content </div>
<div id='content-two'>My Second content </div>
<img src='images/right'></img>

So when I click the right button, the first content should slide to the second (horizontally). Same way, I could flip it back with the left button. Having an ability to have a 1 second delay between transition would be helpful.

Any pointer on how to write this will be really helpful.

Thx

Answer 1

This what you were looking for? Fiddle.

Doesn’t use jQuery.
Note slight change to layout (content DIVs are in
a container).
The CSS for overflow, display, padding and margin is
required.

I just wrote the most basic linear scroll, you can modify it as you want.